DOM tehnike: elementi roditelj, dijete i susjed. Manipulacija DOM-om u čistom JavaScriptu. Brojanje podređenih čvorova

Obično programeri koriste jQuery kada trebaju učiniti nešto s DOM-om. Međutim, gotovo svaka manipulacija DOM-om može se obaviti u čistom JavaScriptu koristeći njegov DOM API.

Pogledajmo detaljnije ovaj API:

Na kraju ćete napisati vlastitu jednostavnu DOM biblioteku koja se može koristiti u bilo kojem projektu.

DOM upiti izvode se pomoću metode .querySelector(), koja kao argument uzima proizvoljni CSS selektor.

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

Vratit će prvi odgovarajući element. Možete učiniti suprotno - provjeriti odgovara li element selektoru:

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

Ako želite dobiti sve elemente koji odgovaraju selektoru, koristite sljedeću konstrukciju:

Const myElements = document.querySelectorAll(".bar")

Ako znate koji nadređeni element želite referencirati, možete jednostavno pretraživati ​​njegovu djecu umjesto pretraživanja cijelog koda:

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

Postavlja se pitanje: zašto onda koristiti druge, manje prikladne metode poput .getElementsByTagName()? Postoji mali problem - izlaz .querySelector() nije ažuriran, a kada dodamo novi element (pogledajte), neće se promijeniti.

Const elements1 = document.querySelectorAll("div") const elements2 = document.getElementsByTagName("div") const newElement = document.createElement("div") document.body.appendChild(newElement) elements1.length === elements2.length // lažno

Također querySelectorAll() prikuplja sve u jedan popis, što ga čini ne baš učinkovitim.

Povrh toga, .querySelectorAll() ima dva mala upozorenja. Ne možete samo pozvati metode na rezultatima i očekivati ​​da će se primijeniti na svaku (kao što ste možda navikli raditi s jQueryjem). U svakom slučaju, morat ćete iterirati kroz sve elemente u petlji. Drugo, vraćeni objekt je popis elemenata, a ne niz. Stoga metode polja neće raditi. Naravno, postoje metode za popise, nešto poput .forEach() , ali, nažalost, nisu prikladne za sve slučajeve. Stoga je bolje pretvoriti popis u niz:

// Korištenje Array.from() Array.from(myElements).forEach(doSomethingWithEachElement) // Ili prototip polja (prije ES6) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // Jednostavnije: .forEach.call( myElements, doSomethingWithEachElement)

Svaki element ima neka svojstva koja se odnose na "obitelj".

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

Budući da je sučelje Element naslijeđeno od sučelja Node, sljedeća svojstva su također prisutna:

MyElement.childNodes myElement.firstChild myElement.lastChild myElement.previousSibling myElement.nextSibling myElement.parentNode myElement.parentElement

Prva svojstva odnose se na element, a posljednja (s izuzetkom .parentElement) mogu biti popisi elemenata bilo kojeg tipa. Prema tome, možete provjeriti vrstu elementa:

MyElement.firstChild.nodeType === 3 // ovaj element će biti tekstualni čvor

Dodavanje nove klase vrlo je jednostavno:

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

Dodavanje svojstva elementu je isto kao i za bilo koji drugi objekt:

// Dobivanje vrijednosti atributa const value = myElement.value // Postavljanje atributa kao svojstva elementa myElement.value = "foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Možete koristiti metode .getAttibute(), .setAttribute() i .removeAttribute(). Oni će odmah promijeniti HTML atribute elementa (za razliku od DOM svojstava), što će uzrokovati ponovno renderiranje preglednika (možete vidjeti sve promjene ispitivanjem elementa pomoću razvojnih alata preglednika). Takva ponovna crtanja ne samo da zahtijevaju više resursa od postavljanja svojstava DOM-a, već također mogu dovesti do neočekivanih pogrešaka.

Obično se koriste za elemente koji nemaju odgovarajuća DOM svojstva, kao što je colspan. Ili ako je njihova upotreba stvarno neophodna, na primjer za HTML svojstva kod nasljeđivanja (vidi).

Dodaju se na isti način kao i druga svojstva:

MyElement.style.marginLeft = "2em"

Neka specifična svojstva mogu se postaviti pomoću .style , ali ako želite dobiti vrijednosti nakon nekih izračuna, onda je bolje koristiti window.getComputedStyle() . Ova metoda prima element i vraća CSSStyleDeclaration koja sadrži stilove i samog elementa i njegovog roditelja:

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

Elemente možete pomicati:

// Dodavanje elementa1 kao posljednjeg djeteta elementa2 element1.appendChild(element2) // Umetanje elementa2 kao djeteta elementa1 prije element3 element1.insertBefore(element2, element3)

Ako ga ne želite premjestiti, ali trebate umetnuti kopiju, upotrijebite:

// Kreirajte klon const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

Metoda .cloneNode() uzima Booleovu vrijednost kao argument, a ako je istina, također klonira dječji elementi.

Naravno, možete kreirati nove elemente:

Const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("neki tekst")

Zatim ih umetnite kao što je prikazano gore. Ne možete izravno izbrisati element, ali to možete učiniti putem nadređenog elementa:

MyParentElement.removeChild(myElement)

Također možete kontaktirati neizravno:

MyElement.parentNode.removeChild(myElement)

Svaki element ima svojstva kao što su .innerHTML i .textContent, oni sadrže HTML kod i, sukladno tome, sam tekst. Sljedeći primjer mijenja sadržaj elementa:

// Promjena HTML-a myElement.innerHTML = ` Novi sadržaj ( el.addEventListener("promjena", funkcija (događaj) ( console.log(event.target.value) )) ))

Da biste to učinili, upotrijebite metodu .preventDefault(), koja blokira standardne akcije. Na primjer, blokirat će podnošenje obrasca ako autorizacija na strani klijenta nije bila uspješna:

MyForm.addEventListener("submit", function (event) ( const name = this.querySelector("#name") if (name.value === "Donald Duck") { alert("You gotta be kidding!") event.preventDefault() } }) !}

Metoda .stopPropagation() pomoći će ako imate određeni rukovatelj događajima dodijeljen podređenom elementu i drugi rukovatelj događajima dodijeljen roditelju za isti događaj.

Kao što je ranije navedeno, metoda .addEventListener() uzima izborni treći argument u obliku konfiguracijskog objekta. Ovaj objekt mora sadržavati bilo koje od sljedećih Booleovih svojstava (sva su prema zadanim postavkama postavljena na false):

• snimanje: događaj će biti priložen ovom elementu prije bilo kojeg drugog elementa ispod u DOM-u;
• jednom: događaj se može dodijeliti samo jednom;
• pasivno: event.preventDefault() bit će zanemaren (iznimka tijekom pogreške).

Najčešće svojstvo je .capture i toliko je uobičajeno da postoji prečac za njega: umjesto da ga proslijedite u konfiguracijski objekt, samo proslijedite njegovu vrijednost ovdje:

MyElement.addEventListener(tip, slušatelj, istina)

Rukovatelji se uklanjaju pomoću metode .removeEventListener(), koja uzima dva argumenta: tip događaja i referencu na rukovatelja za uklanjanje. Na primjer, svojstvo once može se implementirati ovako:

MyElement.addEventListener("promjena", slušatelj funkcije (događaj) ( console.log(event.type + " pokrenut na " + this) this.removeEventListener("promjena", slušatelj) ))

Recimo da imate element i želite dodati rukovatelj događajima za svu njegovu djecu. Tada biste ih morali provlačiti pomoću metode myForm.querySelectorAll("input") kao što je gore prikazano. Međutim, možete jednostavno dodati elemente u obrazac i provjeriti njihov sadržaj koristeći event.target.

MyForm.addEventListener("promjena", funkcija (event) ( const target = event.target if (target.matches("input")) ( console.log(target.value) ) ))

A još jedna prednost ove metode je da će rukovatelj biti automatski pripojen novim podređenim elementima.

Najlakši način za dodavanje animacije je korištenje CSS-a sa svojstvom prijelaza. Ali za veću fleksibilnost (na primjer, za igre), JavaScript je prikladniji.

Pozivanje metode window.setTimeout() dok animacija ne završi nije dobra ideja jer bi se vaša aplikacija mogla zamrznuti, posebno na Mobilni uredaji. Bolje je koristiti window.requestAnimationFrame() za spremanje svih promjena do sljedećeg ponovnog crtanja. Kao argument uzima funkciju, koja zauzvrat prima vremensku oznaku:

Const start = window.performance.now() const duration = 2000 window.requestAnimationFrame(function fadeIn (now)) ( const progress = now - start myElement.style.opacity = progress / duration if (progress< duration) { window.requestAnimationFrame(fadeIn) } }

Na taj način se postiže vrlo glatka animacija. Mark Brown u svom članku govori o ovoj temi.

Činjenica da u DOM-u morate cijelo vrijeme ponavljati elemente da biste izvršili bilo kakve operacije na elementima može izgledati prilično zamorno u usporedbi s jQueryjevom sintaksom $(".foo").css((color: "red")). Ali zašto ne biste napisali nekoliko vlastitih metoda kako biste olakšali ovaj zadatak?

Const $ = funkcija $ (selektor, kontekst = dokument) ( const elements = Array.from(context.querySelectorAll(selector)) return ( elements, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML = newHtml )) vrati ovo), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) vrati ovo), on (događaj, rukovatelj, opcije) ( this.elements .forEach(element => ( element.addEventListener(event, handler, options) )) return this ) ) )

Složene i teške web aplikacije postale su uobičajene ovih dana. Knjižnice s više preglednika i jednostavne za korištenje kao što je jQuery sa svojom bogatom funkcionalnošću mogu uvelike pomoći u manipuliranju DOM-om u hodu. Stoga ne čudi da mnogi programeri koriste takve biblioteke češće nego rade s izvornim DOM API-jem, s kojim je bilo mnogo problema. Iako su razlike u preglednicima još uvijek problem, DOM je sada u boljem stanju nego što je bio prije 5-6 godina kada je jQuery dobivao na popularnosti.

U ovom ću članku pokazati mogućnosti DOM-a za manipulaciju HTML-om, fokusirajući se na roditeljske, podređene i susjedske odnose. Zaključno, dat ću informacije o podršci preglednika za ove značajke, ali imajte na umu da je biblioteka poput jQuery još uvijek dobra opcija zbog prisutnosti grešaka i nedosljednosti u implementaciji izvorne funkcionalnosti.

Za demonstraciju ću koristiti sljedeće HTML označavanje, promijenit ćemo ga nekoliko puta u članku:

• Primjer jedan
• Primjer dva
• Primjer tri
• Primjer četiri
• Primjer pet
• Primjer šest

Var myList = document.getElementById("myList"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6

Kao što vidite, rezultati su isti, iako su tehnike koje se koriste različite. U prvom slučaju koristim vlasništvo djece. Ovo je svojstvo samo za čitanje i vraća kolekciju HTML elemenata sadržanih unutar traženog elementa; Kako bih prebrojao njihov broj, koristim svojstvo duljine ove zbirke.

U drugom primjeru koristim metodu childElementCount, za koju mislim da je uredniji i potencijalno lakši način za održavanje (razgovarajte o tome kasnije, mislim da nećete imati problema s razumijevanjem što radi).

Mogao bih pokušati koristiti childNodes.length (umjesto children.length), ali pogledajte rezultat:

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

Vraća 13 jer je childNodes skup svih čvorova, uključujući razmake - imajte ovo na umu ako vam je stalo do razlike između čvorova djeteta i čvorova elementa djeteta.

Da provjerim ima li element podređene čvorove, mogu koristiti metodu hasChildNodes(). Metoda vraća Booleovu vrijednost koja ukazuje na njihovu prisutnost ili odsutnost:

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

Znam da moj popis ima podređene čvorove, ali mogu promijeniti HTML tako da ih nema; Oznaka sada izgleda ovako:

I evo rezultata ponovnog pokretanja hasChildNodes():

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

Metoda i dalje vraća true. Iako popis ne sadrži nikakve elemente, on sadrži razmak, što je važeća vrsta čvora. Ova metoda uzima u obzir sve čvorove, a ne samo čvorove elemenata. Kako bi hasChildNodes() vratio false, moramo ponovno promijeniti oznake:

Sada se na konzoli prikazuje očekivani rezultat:

Console.log(myList.hasChildNodes()); // lažno

Naravno, ako znam da bih mogao naići na razmak, prvo ću provjeriti postojanje podređenih čvorova, a zatim upotrijebiti svojstvo nodeType da odredim ima li među njima čvorova elemenata.

Postoje tehnike koje možete koristiti za dodavanje i uklanjanje elemenata iz DOM-a. Najpoznatiji od njih temelji se na kombinaciji metoda createElement() i appendChild().

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

U ovom slučaju stvaram pomoću metode createElement() i zatim ga dodajem tijelu. Vrlo je jednostavno i vjerojatno ste već koristili ovu tehniku.

Ali umjesto umetanja posebno stvorenog elementa, mogu također koristiti appendChild() i jednostavno premjestiti postojeći element. Recimo da imamo sljedeće oznake:

• Primjer jedan
• Primjer dva
• Primjer tri
• Primjer četiri
• Primjer pet
• Primjer šest

Primjer teksta

Mogu promijeniti lokaciju popisa pomoću sljedećeg koda:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.appendChild(myList);

Konačni DOM će izgledati ovako:

Primjer teksta

• Primjer jedan
• Primjer dva
• Primjer tri
• Primjer četiri
• Primjer pet
• Primjer šest

Primijetite da je cijeli popis uklonjen sa svog mjesta (iznad odlomka) i zatim umetnut iza njega prije završnog tijela. Iako se metoda appendChild() obično koristi za dodavanje elemenata stvorenih pomoću createElement(), ona se također može koristiti za premještanje postojećih elemenata.

Također mogu potpuno ukloniti podređeni element iz DOM-a koristeći removeChild() . Evo kako izbrisati naš popis iz prethodnog primjera:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.removeChild(myList);

Element je sada uklonjen. Metoda removeChild() vraća uklonjeni element tako da ga mogu spremiti u slučaju da mi zatreba kasnije.

Var myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);

Postoji i metoda ChildNode.remove() koja je relativno nedavno dodana u specifikaciju:

Var myList = document.getElementById("myList"); mojList.ukloni();

Ova metoda ne vraća udaljeni objekt i ne radi u IE (samo Edge). I obje metode uklanjaju tekstualne čvorove na isti način kao i čvorove elemenata.

Mogu zamijeniti postojeći podređeni element novim, bez obzira na to postoji li taj novi element ili sam ga stvorio ispočetka. Evo oznake:

Primjer teksta

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "primjer"; myDiv.appendChild(document.createTextNode("Novi tekst elementa")); document.body.replaceChild(myDiv, myPar);

Novi tekst elementa

Kao što vidite, metoda replaceChild() uzima dva argumenta: novi element i stari element koji zamjenjuje.

Također mogu koristiti ovu metodu za premještanje postojećeg elementa. Pogledajte sljedeći HTML:

Primjer teksta 1

Primjer teksta 2

Primjer teksta 3

Treći odlomak mogu zamijeniti prvim odlomkom pomoću sljedećeg koda:

Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);

Sada generirani DOM izgleda ovako:

Primjer teksta 2

Primjer teksta 1

Ima ih nekoliko različiti putevi odabirom određenog elementa. Kao što je ranije prikazano, mogu započeti korištenjem zbirke djece ili svojstva childNodes. Ali pogledajmo druge opcije:

Svojstva firstElementChild i lastElementChild rade upravo ono što njihova imena sugeriraju da rade: biraju prvi i zadnji podređeni element. Vratimo se našem označavanju:

• Primjer jedan
• Primjer dva
• Primjer tri
• Primjer četiri
• Primjer pet
• Primjer šest

Mogu odabrati prvi i zadnji element koristeći ova svojstva:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "Primjer jedan" console.log(myList.lastElementChild.innerHTML); // "Primjer šest"

Također mogu koristiti svojstva previousElementSibling i nextElementSibling ako želim odabrati podređene elemente koji nisu prvi ili posljednji. To se postiže kombinacijom svojstava firstElementChild i lastElementChild:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Primjer dva" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Primjer pet"

Postoje također slična svojstva firstChild, lastChild, previousSibling i nextSibling, ali ona uzimaju u obzir sve vrste čvorova, a ne samo elemente. Općenito, svojstva koja uzimaju u obzir samo čvorove elemenata korisnija su od onih koja odabiru sve čvorove.

Već sam pogledao načine za umetanje elemenata u DOM. Prijeđimo na sličnu temu i pogledajmo nove značajke za umetanje sadržaja.

Prvo, postoji jednostavna metoda insertBefore(), slično kao replaceChild(), uzima dva argumenta i radi i s novim i s postojećim elementima. Evo oznake:

• Primjer jedan
• Primjer dva
• Primjer tri
• Primjer četiri
• Primjer pet
• Primjer šest

Primjer paragrafa

Primijetite odlomak koji ću prvo ukloniti, a zatim ga umetnuti prije popisa, sve u jednom potezu:

Var myList = document.getElementById("myList"), container = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);

U rezultirajućem HTML-u odlomak će se pojaviti prije popisa i to je još jedan način za prelamanje elementa.

Primjer paragrafa

• Primjer jedan
• Primjer dva
• Primjer tri
• Primjer četiri
• Primjer pet
• Primjer šest

Kao replaceChild(), insertBefore() uzima dva argumenta: element koji treba dodati i element ispred kojeg ga želimo umetnuti.

Ova metoda je jednostavna. Isprobajmo sada moćniju metodu umetanja: metodu insertAdjacentHTML().

Pseudokod

$(".rightArrow").click(function() ( rightArrowParents = this.dom(); //.dom(); je pseudo funkcija ... trebala bi prikazati cijelo upozorenje(rightArrowParents); ));

Poruka alarma će biti:

(U živim primjerima koje sam ažurirao atribut klase na div kao što je lol multi za demonstraciju rukovanja s više klasa.)

Ovdje je rješenje za točno podudaranje elemenata.

Važno je shvatiti da selektor (nije stvaran) za koje chrome alati pokazuju da ne identificiraju jedinstveno element u DOM-u. ( na primjer, neće razlikovati popis uzastopnih elemenata raspona. Nema informacija o pozicioniranju/indeksiranju)

$.fn.fullSelector = funkcija () ( var path = this.parents().addBack(); var quickCss = path.get().map(function (item) ( var self = $(item), id = item .id ? "#" + item.id: "", clss = item.classList.length ? item.classList.toString().split(" ").map(function (c) ( return "." + c; )).join("") : "", name = item.nodeName.toLowerCase(), index = self.siblings(name).length ? ":nth-child(" + (self.index() + 1) + ")" : ""; if (name === "html" || name === "body") ( return name; ) return name + index + clss; )).join(" > ") ; return quickCss );

A možete ga koristiti ovako:

Console.log($("some-selector").fullSelector());

Premjestio sam komad od T.J. Crowder to tiny jQuery dodatak. Koristio sam verziju jQuery, čak i ako je u pravu da je potpuno nepotrebno opterećenje, ali koristim je samo u svrhu ispravljanja pogrešaka pa me nije briga.

Upotreba:

Ugniježđeni raspon Jednostavni raspon Pre

// rezultat (niz): ["body", "div.sampleClass"] $("span").getDomPath(false) // rezultat (niz): tijelo > div.sampleClass $("span").getDomPath( ) // rezultat (niz): ["body", "div#test"] $("pre").getDomPath(false) // rezultat (niz): tijelo > div#test $("pre").getDomPath ()

Var obj = $("#show-editor-button"), put = ""; while (typeof obj.prop("tagName") != "undefined")( if (obj.attr("class"))( path = "."+obj.attr("class").replace(/\s /g , ".") + put; ) if (obj.attr("id"))( put = "#"+obj.attr("id") + put; ) put = " " +obj.prop( "tagName").toLowerCase() + put; obj = obj.parent(); console.log(path);

zdravo, ova funkcija rješava pogrešku koja se odnosi na trenutni element koji nije prikazan na putu

Provjerite sada

$j(".wrapper").click(function(event) ( selectedElement=$j(event.target); var rightArrowParents = ; $j(event.target).parents().not("html,body") .each(function() ( var entry = this.tagName.toLowerCase(); if (this.className) ( entry += "." + this.className.replace(/ /g, "."); )else if (this.id)( unos += "#" + this.id; ) entry=replaceAll(entry,.","."); rightArrowParents.push(entry); )); rightArrowParents.reverse(); // if(event.target.nodeName.toLowerCase()=="a" || event.target.nodeName.toLowerCase()=="h1")( unos var = event.target.nodeName.toLowerCase(); if (događaj .target.className) ( unos += "." + event.target.className.replace(/ /g, "."); )else if(event.target.id)( unos += "#" + događaj. target.id;) rightArrowParents.push(entry); // )

Gdje je $j = varijabla jQuery

također riješite problem s .. u nazivu klase

evo funkcije zamjene:

Funkcija escapeRegExp(str) ( return str.replace(/([.*+?^=!:$()()|\[\]\/\\])/g, "\\$1"); ) funkcija replaceAll(str, find, replace) ( return str.replace(new RegExp(escapeRegExp(find), "g"), replace); )

Evo izvorne JS verzije koja vraća jQuery stazu. Također dodajem ID-ove za elemente ako postoje. Ovo će vam dati opciju da odaberete najkraći put ako vidite ID u nizu.

Var path = getDomPath(element); console.log(path.join(" > "));

Body > section:eq(0) > div:eq(3) > section#content > section#firehose > div#firehoselist > article#firehose-46813651 > header > h2 > span#title-46813651

Evo funkcije.

Funkcija getDomPath(el) ( var stack = ; while (el.parentNode != null) ( console.log(el.nodeName); var sibCount = 0; var sibIndex = 0; for (var i = 0; i< el.parentNode.childNodes.length; i++) { var sib = el.parentNode.childNodes[i]; if (sib.nodeName == el.nodeName) { if (sib === el) { sibIndex = sibCount; } sibCount++; } } if (el.hasAttribute("id") && el.id != "") { stack.unshift(el.nodeName.toLowerCase() + "#" + el.id); } else if (sibCount >1) ( stack.unshift(el.nodeName.toLowerCase() + ":eq(" + sibIndex + ")"); ) else ( stack.unshift(el.nodeName.toLowerCase()); ) el = el.parentNode ; ) vrati stack.slice(1); // uklanja html element)