A DOM-val dolgozó technikusok: szülő, gyermek és szomszédos elemek. Manipulációk a DOM-val a tiszta JavaScript-en A leányvállalatok létezésének ellenőrzése

Szabályként, ha bármilyen lépést kell végrehajtania a DOM-val, a fejlesztők JQUERY-t használnak. Azonban szinte minden dom manipuláció megtörténhet a tiszta JavaScript-en a Dom API segítségével.

Tekintsük ezt az API-t részletesebben:

A végén megírja az egyszerű DOM könyvtárat, amely bármely projektben használható.

DOM kérések

A DOM-kéréseket a Method.QuerySelector () segítségével végezzük, amelyet argumentumként kapnak, tetszőleges CSS-választó.

Consty myelement \u003d document.Queryselector ("# foo\u003e div.bar)

Vissza fogja térni az első illeszkedő elemre. Éppen ellenkezőleg, ellenőrizhető, hogy a választó eleme megfelel-e:

Myelement.matches ("div.bar") \u003d\u003d\u003d igaz

Ha meg kell kapnia a választóknak megfelelő elemeket, használja a következő tervezést:

Const Myelements \u003d Document.QuerySelectorall ( "Bar")

Ha tudod, hogyan hivatkozhatsz arra, hogy melyik szülőelemre, egyszerűen a gyermek elemei között kereshetsz, ahelyett, hogy az egész kódot keresnék:

Const Mychildelemet \u003d MyElement.QuerySelector ( "bemenet") // helyett: // Document.QuerySelector ( "# Foo\u003e Div.bar Input")

A kérdés merül fel: miért használjon más, kevésbé kényelmes módszereket, mint a .gelsybytagname ()? Van egy kis probléma - a kimeneti eredmény .QuereSelector () nincs frissítve, és ha új elemet adunk hozzá (lásd), akkor nem fog változni.

Const Elements1 \u003d Document.QuerySelectorall ("div") Const Elements2 \u003d Document.getElementsbytagname ("div") CONST NEWELEMENT \u003d DOKUMENTUM.CREATEELMENT ("DIV" dokumentum.bodyeelsial ("div") dokumentum.body.appendchild (Newelement) elemek1. hossza \u003d\u003d\u003d Elements2.Length // FALSE

A QuerySelectorall () mindegyiket egy listában is összegyűjti, ami nem túl hatékony.

Hogyan kell dolgozni a listákkal?

Az összes U.QuerySelectorall () mellett két kis árnyalat van. Nem egyszerűen hívja az eredményeket az eredményekhez, és elvárhatja, hogy mindegyikükre alkalmazzák őket (amennyit használhatsz, hogy jquery-val csináld). Mindenesetre meg kell rendezni a ciklus összes elemét. A második - a visszaküldött tárgy az elemek listája, nem egy tömb. Következésképpen a tömbök módszerei nem működnek. Természetesen vannak olyan módszerek, amelyek listák, valami, mint a .Foreach (), de sajnos, nem alkalmasak minden esetben. Tehát jobb, ha egy listát egy tömbbe konvertálhat:

// az array.from () array.from (myelements) .FROM (myelements) .Foroache // vagy prototípus tömb (ES6) array.prototype.foreach.call (myelements, dosomethingwitheachelement) // könnyebb: .Foreach.call )

Minden egyes elemnek van néhány olyan tulajdonsága, amely a "Család" -re utal.

Myelement.Children myelement.Firstelmentchild myeelement.lastelementchild myeelement.Previentientsibling myeelement.Nextelementibling

Mivel az elem interfész (elem) öröklődik a csomópont interfész (csomópont), a következő tulajdonságok is jelen vannak:

Myelement.childnodes myeelement.Firstchild myeelement.lastchild myelement.Previoussibling myelement.Nextsibling myelement.parennode myeelement.Partentelement

Az első tulajdonságok az elemre vonatkoznak, és az utolsó (a .parenelement kivételével) bármilyen típusú elemek listája lehet. Ennek megfelelően ellenőrizheti az elem típusát:

Myelement.firstchild.nodetype \u003d\u003d\u003d 3 // Ez az elem szövegcsomópont lesz

Osztályok és attribútumok hozzáadása

Új osztály hozzáadása nagyon egyszerű:

Myelement.classlist.add ("foo") myeelment.classlist.remove ("bar") myelemlass.classlist.toggle ("baz")

Tulajdonság hozzáadása egy elemhez, csakúgy, mint bármely objektum:

// az attribútum értékének megszerzése const érték \u003d myelement.value // Állítsa be az attribútumot a myelement.value \u003d "elem (! Lang: Foo)" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Használhatja a Methods.Getattribute (), .setattribute () i.RemoveatTribute (). Ők azonnal változtatni a HTML attribútumokat az elem (ellentétben a DOM tulajdonságok), amelynek hatására a böngésző újrarajzolás (láthatod az összes változások tanulmányozásával elemet a fejlesztői eszközök a böngésző). Az ilyen perverterek nemcsak több erőforrást igényelnek, mint a DOM tulajdonságainak telepítése, hanem váratlan hibákhoz is vezethetnek.

Általános szabályként olyan elemekre használják, amelyeknek nincs megfelelő DOM tulajdonságai, például Colspan. Vagy ha használatuk valóban szükséges, például a HTML tulajdonságok öröklése (lásd).

CSS-stílusok hozzáadása

Adja hozzá őket ugyanúgy, mint a többi tulajdonság:

Myelement.style.marginLEFT \u003d "2EM"

Néhány speciális tulajdonság beállítható .Style használatával, de ha néhány számítástechnika után értékeket szeretne kapni, akkor jobb, ha az ablakot használjuk.GetComputedstyle (). Ez a módszer egy elemet kap és visszaadja a cssstyledeclaration-t, amely stílusokat tartalmaz mind az elem, mind a szülője:

Window.getcomputedstyle (myeelement) .getpropertyvalue ("margó-bal")

Változtat

Mozgathatja az elemeket:

// Element1 hozzáadásával1 Az utolsó elem eleme2 eleme1.appendchild (elem2) // A 2 elem elem eleme1 az Element3 Element1.insertabe (elem2, elem3)

Ha nem akarsz mozogni, de be kell illeszteni egy példányt, használjuk:

// klón constyclone \u003d myelement.clonenode () myparenelement.appendchild (myelementclone)

A módszer. A klonenód () logenódot vesz igénybe, mint argumentum, és a gyermekelemek is klónoztak.

Természetesen új elemeket hozhat létre:

CONST MYNEWELEMENT \u003d DOKUMENTUMOK.CREATEELMENT ("DIV") CONST MYNEWTEXTNODE \u003d DOKUMENTUM.CREATTEXTNODE ("Néhány szöveg")

Majd helyezze be őket a fentiek szerint. Nem működik közvetlenül a törléshez, de a szülőelemen keresztül megteheti:

Myparenelement.Removechild (myeefelement)

Kapcsolatba léphet és közvetve:

Myelement.parentnode.removechild (myeefelement)

Elemek módszerei

Minden elem rendelkezik olyan tulajdonságokkal, mint pl. A következő példa megváltoztatja az elem tartalmát:

// módosítsa a html myelement.innerhtml \u003d `

Valójában a HTML változása rossz ötlet, mivel a korábban elvesztett összes változás elvész, és az eseménykezelők túlterheltek. Sokkal jobb, hogy használja ezt a módszert csak a teljesen eldobja HTML és helyette egy másolat a kiszolgálón. Mint ez:

Const link \u003d document.createelmement ("A") CONST TEXT \u003d DOKUMENTUM.CREATETEXTNODE ("Folytatódik olvasó ...") const hr \u003d document.createels ("hr") link.href \u003d "foo.html" link.appendchild ( Szöveg) myelement.appendchild (link) myeelment.appendchild (HR)

Ez azonban két redrawr-t jelent a böngészőben, míg a .innerhtml csak egyhez vezet. Megkerülheti azt, ha először hozzáadja a dokumentumfragmenthez, majd adjon hozzá egy töredéket, amire szüksége van:

Const fragment \u003d document.createdocumentfragment () fragment.appendchild (szöveg) fragment.appendchild (HR) myelement.appendchild (fragmens)

Eseménykezelők

Az egyik legegyszerűbb kezelő:

Myelement.Onclick \u003d funkció onclick (esemény) (console.log (esemény.Type + "Got Fired"))))))

De általában kerülni kell. Itt.Kattintson egy elem tulajdonság, és elméletileg megváltoztathatja azt, de nem tud más rakodókat felvenni egy másik funkcióval, amely a régire utal.

Handlers hozzáadása Jobb használata.addeventlistener (). Három argumentumot vesz igénybe: az esemény típusa, a funkció, amelyet minden alkalommal hívnak, amikor aktiválják, és a konfigurációs objektum (később visszatérünk hozzá).

Myelement.addeventlistener ("kattintás", funkció (console.log))) myelement.addeventlistener ("Click", funkció (esemény) (console.log (esemény.type + "megindult")))

Az esemény.target tulajdonság hozzáteszi az elemet, amelyre az esemény rögzített.

És így hozzáférhet az összes tulajdonsághoz:

// tulajdonság `Forms` - tömb, amely linkeket tartalmaz az összes formátumhoz CONSORD MYFORM \u003d DOKUMENTUM.FORMS CONST MYILUTELEMENTÉKEK \u003d MYFORM.QUERESELECECERLALL ("INPUT") Array.from (el \u003d\u003e (El.Addeventlistener ("Változás" , Funkció (esemény) (console.log (event.target.value)))))))))))))

Alapértelmezett megelőzés

Ehhez használja a módszert.PreventDefault (), amely blokkolja a szabványos műveleteket. Például blokkolja az űrlap küldését, ha az ügyféloldali engedély nem sikerült sikeres:

Myform.addeventlistener ("Küldés", funkció (CONST NAME \u003d this.QuereSelector ("# Name"), ha (NAME.Value \u003d\u003d\u003d (! Lang: Donald Duck") { alert("You gotta be kidding!") event.preventDefault() } }) !}

Módszer.StopPropagálás () Segít, ha van egy speciális eseménykezelő, amely a gyermekelem mögött van rögzítve, és a szülőhöz rendelt esemény második kezelője.

Amint korábban említettük, a .addeventlistener () módszer a harmadik opcionális argumentumot objektumként veszi át a konfigurációval. Ez az objektumnak tartalmaznia kell a következő logikai tulajdonságok bármelyikét (alapértelmezett az összes hamis értékben):

• capture: Az esemény csatolódik ehhez az elemhez, mielőtt bármely más elemet az alábbi DOM-ban;
• egyszer: az esemény csak egyszer rögzíthető;
• passzív: Event.PreventDefault () figyelmen kívül hagyja (kivétel hiba alatt).

A leggyakoribb ingatlan az .Capture, és olyan gyakori, hogy rövid felvételre van szükség: a konfigurációs objektumban való átadása helyett egyszerűen adja meg az értékét itt:

Myelement.addeventlistener (típus, hallgató, igaz)

A feldolgozók törlődnek a.Removeeventlistener () módszerrel, amely két argumentumot tárol: Eseménytípus és hivatkozás a kezelő törlésére. Például az ONC tulajdonság a következőképpen hajtható végre:

Myelement.addeventlistener ("Change", Funkcióhallgató (esemény) (Console.Log (Event.Type + "megindult a" + ez). "+ Themoveeventlistener (" Change ", Listener))

Öröklés

Tegyük fel, hogy van egy elemed, és az eseménykezelőt minden gyermekelemére szeretné hozzáadni. Ezután meg kell vezetned őket a ciklusban a Myform.QuerySelectorLall módszerrel ("bemenet") segítségével, amint azt a fentiekben ismertetjük. Azonban egyszerűen hozzáadhat elemeket az űrlapba, és ellenőrizheti a tartalmukat az Event.target használatával.

Myform.addeventlistener ("Change", funkció (esemény) (CONST TARGET \u003d EVENT.TARGET, ha (Target.Matches ("Bemenet")) (konzol.log (target.value))))

És még egy plusz ennek a módszernek az, hogy a kezelő automatikusan megköti az új gyermekelemeket.

Élénkség

A legegyszerűbb módja az animáció hozzáadása CSS-vel az átmeneti tulajdonsággal. De a nagyobb rugalmasság érdekében (például a JavaScript a legjobban megfelel.

Hívja az ablakot.SettieOut () módszert, amíg az animáció véget ér, nem a legjobb ötlet, mivel az alkalmazás lefagyhat, különösen a mobileszközökön. Jobb, ha az ablakot használjuk.RQUESTANIMATIONFRAME (), hogy megmentse az összes módosítást a következő újradalra. Ez egy olyan funkciót vesz igénybe, mint egy érv, amely viszont időbélyegzőt kap:

Const start \u003d window.performance.Now () const időtartam \u003d 2000 window.requestanimationFrame (const progress \u003d most - indítsa el a myelement.style.sopacity \u003d haladás / időtartam, ha (haladás)< duration) { window.requestAnimationFrame(fadeIn) } }

Ily módon nagyon sima animáció érhető el. A cikkében Mark Brown Beszélgetés ezen a témában.

Írjuk a könyvtárat

Az a tény, hogy a DOM-ban az elemekkel végzett műveletek elvégzéséhez minden alkalommal ki kell rendezni, úgy tűnik, nagyon unalmasnak tűnhet a jQuery $ Syntax ("Foo"). CSS ((szín: "piros")) . De miért nem írsz néhány saját módszereit, megkönnyítve ezt a feladatot?

CONST $ \u003d FUNCTION $ \u003d CONSTEMENTS \u003d Array.FROM (Select.QuereSelectorLall (Selector) Visszatérés (elemek, html (newtml) (elem \u003d\u003e elem.innerhtml \u003d newhtml)) Visszaadja ezt), CSS (elem \u003d\u003e object.assign (elem.style, Newcss))) Visszaadja ezt), bekapcsolva (Esemény, Handler, Options) (this.elems .Foreach (elem \u003d\u003e (elem \u003d\u003e (Essent, Handler, Options)))))

A komplex és nehéz webes alkalmazások ma megszokottak. Crossbox és könnyen használható jQuery típusú könyvtárak széles funkcionalitásával erősen segíthetnek a Dom manipulálásában. Ezért nem meglepő, hogy sok fejlesztő gyakrabban használja az ilyen könyvtárakat, mint a natív Dom API-vel, amellyel sok probléma merült fel. És bár a böngészők megkülönböztetése továbbra is problémát jelent, a Dom most jobb, mint 5-6 évvel ezelőtt, amikor a jQuery népszerűségű.

Ebben a cikkben bemutatom a HTML-manipulálás lehetőségét, összpontosítva a szülői, a gyermek és a szomszédos elemek kapcsolatára. Következtetésben adatot adok a böngészők ezen lehetőségeinek támogatására, de úgy vélem, hogy a jQuery típusú könyvtár továbbra is jó választási lehetőség a bogarak és következetlenségek rendelkezésre állása miatt a natív funkcionális funkcionális megvalósításában.

Leányvállalatok számlálása

Ahhoz, hogy bemutassam, használom a következő HTML jelölést, a cikk során többször is megváltoztatjuk:

• 1. példa.
• Második példa.
• 3. példa.
• 4. példa.
• 5. példa.
• 6. példa.

Var mylist \u003d document.getelementbyid ("mylist"); Konzol.log (mylist.children.hossz); // 6 console.log (mylist.childelementcount); // 6.

Amint láthatja, az eredmények ugyanazok, bár a technikák különbözőek. Az első esetben a gyermekek tulajdonát használom. Ez a tulajdonság csak olvasható, visszaadja a kért elemen belüli HTML elemek gyűjteményét; A szám számításához használom a gyűjtemény hosszúságát.

A második példában a ChildelementCount módszert használom, amely számomra pontosabb és potenciálisan támogatott módon tűnik (később megvitatjuk, nem hiszem, hogy problémái vannak azzal, hogy megértsük, hogy mit csinál).

Megpróbálhatom használni a gyermeknevek.Length-t (a gyermekek helyett), de nézd meg az eredményt:

Var mylist \u003d document.getelementbyid ("mylist"); konzol.log (mylist.childnodes.lengnth); // 13

Ez visszaadja a 13-at, mert a gyermekek minden csomópont gyűjteménye, beleértve a szóközöket is - ezt figyelembe vesszük, ha fontos, mint a leányvállalatok és a gyermekelemek közötti különbség.

Ellenőrizze a leányvállalatok létezését

A leányvállalat elemének jelenlétének ellenőrzéséhez használhatom a Haschildnodes () módszert. A módszer logikai értéket ad vissza, jelentést készít a rendelkezésre állásukról vagy távollétéről:

Var mylist \u003d document.getelementbyid ("mylist"); konzol.log (mylist.haschildnodes ()); // igaz.

Tudom, hogy vannak leányvállalatok a listámban, de megváltoztathatom a HTML-t úgy, hogy nem; Most a jelölés így néz ki:

És itt van a Haschildnodes () új bevezetésének eredménye:

Konzol.log (mylist.haschildnodes ()); // igaz.

A módszer még mindig igaz. Bár a lista nem tartalmaz semmilyen elemet, van egy hely, amely érvényes típusú csomópont. Ez a módszer figyelembe veszi az összes csomópontot, nem csak csomópontokat. Ahhoz, hogy a Haschildnodes () visszaadja a FALSE-t, újra meg kell változtatnunk a jelölést:

És most a várt eredmény megjelenik a konzolban:

Konzol.log (mylist.haschildnodes ()); // Hamis

Természetesen, ha tudom, hogy találkozhatok egy helyet, először ellenőrizni fogom a gyermekcsomópontok létezését, majd a NodeType tulajdonságot, meghatározom, hogy vannak-e elemelemek.

Leányvállalatok hozzáadása és eltávolítása

Vannak olyan technikák, amelyek a DOM-ból származó elemek hozzáadására és törlésére használhatók. A leghíresebbek a CreateEelement () módszerek és az appendchild () kombinációján alapulnak.

Var myel \u003d document.Createels ("div"); document.body.appendchild (miel);

Ebben az esetben létrehozom

Elő.