A fejlesztők általában akkor használják a jQuery-t, amikor valamit tenniük kell a DOM-mal. Azonban szinte bármilyen DOM-manipuláció elvégezhető tiszta JavaScript a DOM API használatával.

Nézzük meg ezt az API-t részletesebben:

A végén megírja saját egyszerű DOM-könyvtárát, amely bármilyen projektben használható.

DOM lekérdezések

A DOM-lekérdezések a .querySelector() metódussal készülnek, amely egy tetszőleges CSS-választót vesz fel argumentumként.

Const myElement = document.querySelector("#foo > div.bar")

Visszaadja az első egyező elemet. Megteheti az ellenkezőjét is – ellenőrizze, hogy egy elem egyezik-e egy szelektorral:

MyElement.matches("div.bar") === igaz

Ha meg szeretné kapni az összes olyan elemet, amely megfelel egy választónak, használja a következő konstrukciót:

Const myElements = document.querySelectorAll(.bar")

Ha tudja, hogy melyik szülőelemre kell hivatkozni, egyszerűen kereshet a gyermekei között, ahelyett, hogy a teljes kódban keresne:

Const myChildElemet = myElement.querySelector("input") // Ehelyett: // document.querySelector("#foo > div.bar bemenet")

Felmerül a kérdés: akkor miért használjunk más, kevésbé kényelmes módszereket, mint a.getElementsByTagName() ? Van egy kis probléma - az output.querySelector() eredménye nem frissül, és amikor hozzáadjuk új elem(lásd ), ez nem fog változni.

const elements1 = document.querySelectorAll("div") const elements2 = document.getElementsByTagName("div") const newElement = document.createElement("div") document.body.appendChild(newElement) elements1.length === elements2.length // hamis

A querySelectorAll() is mindent egy listába gyűjt, ami miatt nem túl hatékony.

Hogyan dolgozzunk listákkal?

Ezen túlmenően a .querySelectorAll() két apró furcsasággal rendelkezik. Nem lehet egyszerűen az eredmények alapján metódusokat hívni, és elvárni, hogy mindegyikre alkalmazzák őket (ahogyan a jQuery esetében megszokhattuk). Mindenesetre meg kell ismételnie a ciklus összes elemét. Másodszor, a visszaadott objektum elemek listája, nem tömb. Ezért a tömbmódszerek nem működnek. Természetesen vannak listákra vonatkozó metódusok, például a .forEach() , de sajnos nem minden esetben alkalmasak. Tehát jobb a listát tömbbé konvertálni:

// Array.from() Array.from(myElements) használata (myElements , doSomethingWithEachElement)

Minden elemnek van néhány tulajdonsága, amelyek egy "családra" utalnak.

MyElement.children myElement.firstElementChild myElement.lastElementChild myElement.previousElementSibling myElement.nextElementSibling

Mivel az elem interfész a csomóponti felülettől öröklődik, a következő tulajdonságok is jelen vannak:

MyElement.childNodes myElement.firstChild myElement.lastChild myElement.previousTestvér myElement.nextSibling myElement.parentNode myElement.parentElement

Az előbbi tulajdonságok az elemre vonatkoznak, míg az utóbbiak (a .parentElement kivételével) tetszőleges típusú elemek listái lehetnek. Ennek megfelelően ellenőrizheti az elem típusát:

MyElement.firstChild.nodeType === 3 // ez az elem szöveges csomópont lesz

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

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

myElement.classList.add("foo") myElement.classList.remove("bar") myElement.classList.toggle("baz")

Tulajdonság hozzáadása egy elemhez pontosan ugyanaz, mint bármely objektumhoz:

// A const value = myElement.value attribútum értékének lekérése // Az attribútum beállítása a myElement.value = "(!LANG:foo) elem tulajdonságaként" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Használhatja a .getAttibute() , .setAttribute() és .removeAttribute() metódusokat. Azonnal megváltoztatják az elem HTML-attribútumait (szemben a DOM-tulajdonságokkal), ami a böngésző újrarenderelését indítja el (az esetleges változásokat megtekintheti, ha megvizsgálja az elemet a böngésző fejlesztői eszközeivel). Az ilyen újrarajzolások nemcsak több erőforrást igényelnek, mint a DOM-tulajdonságok beállítása, hanem váratlan hibákhoz is vezethetnek.

Általában olyan elemeken használatosak, amelyek nem rendelkeznek megfelelő DOM-tulajdonságokkal, például a colspan . Vagy ha valóban szükséges a használatuk, például a HTML tulajdonságokhoz öröklődéskor (lásd).

CSS-stílusok hozzáadása

Hozzáadásuk ugyanúgy történik, mint a többi tulajdonság:

MyElement.style.marginLeft = "2em"

Néhány bizonyos tulajdonságokat beállítható a .style segítségével, de ha néhány számítás után szeretné megkapni az értékeket, akkor jobb a window.getComputedStyle() használata. Ez a metódus veszi az elemet, és egy CSSStyleDeclaration-t ad vissza, amely magában foglalja az elem és a szülő stílusát is:

Window.getComputedStyle(myElement).getPropertyValue("margin-left")

A DOM megváltoztatása

Az elemeket áthelyezheti:

// Az elem1 hozzáadása az elem2 utolsó gyermekeként elem1.appendChild(elem2) // Az elem2 beillesztése az elem1 gyermekeként az elem3 elé elem1.insertBefore(elem2, elem3)

Ha nem szeretne áthelyezni, de be kell illesztenie egy másolatot, használja:

// Klón létrehozása const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

A .cloneNode() metódus logikai értéket vesz fel argumentumként, és ha igaz , akkor klónoz és gyermek elemek.

Természetesen új elemeket is létrehozhat:

const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("némi szöveg")

Ezután helyezze be őket a fent látható módon. Egy elemet közvetlenül nem törölhet, de a szülőelemen keresztül megteheti:

MyParentElement.removeChild(myElement)

Közvetetten is hivatkozhat:

MyElement.parentNode.removeChild(myElement)

Módszerek az elemeken

Minden elem rendelkezik olyan tulajdonságokkal, mint az .innerHTML és a .textContent , ezek tartalmazzák a HTML kódot és ennek megfelelően magát a szöveget is. A következő példa megváltoztatja egy elem tartalmát:

// A HTML módosítása myElement.innerHTML = `

Valójában a HTML megváltoztatása rossz ötlet, mert elveszíti az összes korábban végrehajtott módosítást, és túlterheli az eseménykezelőket is. Jobb ezt a módszert csak úgy használni, ha teljesen eldobja az összes HTML-t, és lecseréli egy másolatra a szerverről. Mint ez:

const link = document.createElement("a") const text = document.createTextNode("olvasás folytatása...") const hr = document.createElement("hr") link.href = "foo.html" link.appendChild( text) myElement.appendChild(link) myElement.appendChild(hr)

Ez azonban két böngésző újrarajzolást eredményez, míg az .innerHTML csak egyet. Ezt megkerülheti, ha először mindent hozzáad a DocumentFragmenthez, majd hozzáadja a szükséges töredéket:

Const fragment = document.createDocumentFragment() fragment.appendChild(text) fragment.appendChild(hr) myElement.appendChild(fragment)

Eseménykezelők

Az egyik legegyszerűbb kezelő:

MyElement.onclick = függvény onclick (esemény) ( console.log(event.type + " kirúgva") )

De általános szabályként ezt kerülni kell. Itt az .onclick az elem tulajdonsága, és elméletileg megváltoztatható, de nem tud további kezelőket hozzáadni egy másik, a régire hivatkozó függvény használatával.

A kezelők hozzáadásához jobb az .addEventListener() használata. Három argumentumra van szükség: egy eseménytípusra, egy függvényre, amely minden aktiválódáskor meghívódik, és egy konfigurációs objektumra (erre később térünk ki).

MyElement.addEventListener("kattintás", függvény (esemény) ( console.log(event.type + " kirúgva") )) myElement.addEventListener("kattintás", függvény (event) ( console.log(event.type + " megint kirúgtak")))

Az event.target tulajdonság arra az elemre utal, amelyhez az esemény kapcsolódik.

Így hozzáférhet az összes tulajdonsághoz:

// A `forms` tulajdonság az összes űrlapra mutató hivatkozásokat tartalmazó tömb const myForm = document.forms const myInputElements = myForm.querySelectorAll("input") Array.from(myInputElements).forEach(el => ( el.addEventListener(") change ", function (event) ( console.log(event.target.value) )) ))

Az alapértelmezett műveletek megakadályozása

Ehhez a .preventDefault() metódust használjuk, amely blokkolja a szabványos műveleteket. Például blokkolja az űrlap elküldését, ha az ügyféloldali hitelesítés nem volt sikeres:

MyForm.addEventListener("submit", függvény (esemény) ( const name = this.querySelector("#name") if (name.value === "(!LANG:Donald Duck") { alert("You gotta be kidding!") event.preventDefault() } }) !}

A .stopPropagation() metódus akkor segít, ha van egy adott eseménykezelő a gyermekhez, és egy második kezelő ugyanahhoz az eseményhez a szülőhöz.

Ahogy korábban említettük, az .addEventListener() metódus egy opcionális harmadik argumentumot vesz fel konfigurációs objektumként. Ennek az objektumnak tartalmaznia kell a következő logikai tulajdonságok bármelyikét (alapértelmezés szerint mindegyik false):

• rögzítés: az esemény ehhez az elemhez lesz csatolva a DOM bármely más eleme előtt;
• egyszer: Egy eseményt csak egyszer lehet rögzíteni.
• passzív: az event.preventDefault() figyelmen kívül lesz hagyva (kivétel hiba esetén).

A legáltalánosabb tulajdonság a .capture, és annyira elterjedt, hogy van rá egy rövidítés: ahelyett, hogy egy konfigurációs objektumban adná át, egyszerűen adja meg az értékét itt:

MyElement.addEventListener(típus, figyelő, igaz)

A kezelők eltávolítása a .removeEventListener() metódussal történik, amelyhez két argumentum szükséges: az eseménytípus és az eltávolítandó kezelőre való hivatkozás. Például az egyszeri tulajdonság a következőképpen valósítható meg:

MyElement.addEventListener("módosítás", függvényfigyelő (esemény) ( console.log(event.type + " aktiválva lett " + this) this.removeEventListener("módosítás", figyelő) ))

Öröklés

Tegyük fel, hogy van egy eleme, és eseménykezelőt szeretne hozzáadni az összes alárendelt eleméhez. Ezután a fent látható módon a myForm.querySelectorAll("input") metódussal kell végigfutnia rajtuk. Azonban egyszerűen hozzáadhat elemeket az űrlaphoz, és ellenőrizheti azok tartalmát az event.target segítségével.

MyForm.addEventListener("módosítás", függvény (event) ( const target = event.target if (target.matches("input")) ( console.log(target.value) ) ))

A módszer további előnye, hogy a kezelő automatikusan hozzá lesz kapcsolva az új gyermekelemekhez.

Élénkség

Az animáció hozzáadásának legegyszerűbb módja a CSS használata az átmeneti tulajdonsággal. De a nagyobb rugalmasság érdekében (például egy játékhoz) a JavaScript jobban megfelel.

A window.setTimeout() metódus meghívása az animáció befejezéséig nem jó ötlet, mivel az alkalmazás lefagyhat, különösen mobileszközökön. Jobb, ha a window.requestAnimationFrame() függvényt használod az összes változtatás mentéséhez a következő újrarajzolásig. Egy függvényt vesz fel argumentumként, amely viszont kap egy időbélyeget:

const start = window.performance.now() const időtartama = 2000 window.requestAnimationFrame(függvény fadeIn (now)) ( const progress = most - start myElement.style.opacity = előrehaladás / időtartam if (haladás)< duration) { window.requestAnimationFrame(fadeIn) } }

Ily módon nagyon sima animáció érhető el. Mark Brown cikkében ezt a témát tárgyalja.

Saját könyvtárunk írása

Az a tény, hogy a DOM-ban állandóan át kell iterálni az elemeket, hogy valamit csináljunk velük, elég fárasztónak tűnhet a jQuery $(.foo").css((szín: "red")) szintaxisához képest. De miért nem ír néhány saját módszert, hogy megkönnyítse ezt a feladatot?

Const $ = függvény $(választó, kontextus = dokumentum) ( const elements = Array.from(context.querySelectorAll(selector)) return ( elements, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML =) newHtml )) return this ), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) return this ), on (esemény, kezelő, opciók) ( this.elements .forEach(elem => ( element.addEventListener(esemény, kezelő, opciók) )) ezt adja vissza ) ) )

Elő

Mint látható, az eredmények ugyanazok, bár az alkalmazott technikák eltérőek. Az első esetben a gyermekek tulajdonát használom. Ez egy csak olvasható tulajdonság, és egy gyűjteményt ad vissza HTML elemek, amely a kért elemen belül található; számuk megszámlálásához ennek a gyűjteménynek a long tulajdonságát használom.

A második példában a childElementCount metódust használom, amely szerintem rendezettebb és potenciálisan jobban karbantartható (erről később, nem hiszem, hogy gondot okozna megérteni, mit csinál).

Megpróbálhatnám a childNodes.length használatát (a children.length helyett), de nézd meg az eredményt:

Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); 13

13-at ad vissza, mivel a childNodes az összes csomópont gyűjteménye, beleértve a szóközöket – ezt tartsa szem előtt, ha érdekli a gyermek csomópontok és a gyermekelem csomópontok közötti különbség.

Gyermek csomópontok meglétének ellenőrzése

A hasChildNodes() metódussal ellenőrizhető, hogy egy elemnek vannak-e gyermekcsomópontjai. A metódus visszatér logikai érték jelenlétük vagy hiányuk jelzése:

Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // igaz

Tudom, hogy a listámnak gyermekcsomópontjai vannak, de meg tudom változtatni a HTML-t, hogy ne legyen; most így néz ki a jelölés:

És itt van a hasChildNodes() ismételt futtatásának eredménye:

Console.log(myList.hasChildNodes()); // igaz

A metódus továbbra is igazat ad vissza. A lista ugyan nem tartalmaz elemeket, de tartalmaz szóközt, ami egy érvényes csomóponttípus. Ez a módszer minden csomópontot figyelembe vesz, nem csak elemcsomópontokat. Ahhoz, hogy a hasChildNodes() hamis értéket adjon vissza, ismét módosítanunk kell a jelölést:

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

Console.log(myList.hasChildNodes()); // hamis

Természetesen, ha tudom, hogy szóközzel találkozhatok, először ellenőrzöm a gyermek csomópontok létezését, majd a nodeType tulajdonság segítségével megállapítom, hogy vannak-e közöttük elemcsomópontok.

Gyermekelemek hozzáadása és eltávolítása

Vannak olyan technikák, amelyekkel elemeket lehet hozzáadni és eltávolítani a DOM-ból. Ezek közül a leghíresebb a createElement() és az appendChild() metódusok kombinációján alapul.

VarmyEl = document.createElement("div"); document.body.appendChild(myEl);

Ebben az esetben én alkotok