Pochopenie DOM je nevyhnutné vo vašej kariére vývoja webu. Mali by ste vedieť, ako vybrať rôzne prvky v DOM, aby ste potom mohli čítať ich obsah alebo ich upravovať.

Prechádzanie DOM popisuje, ako sa pohybovať v stromovej štruktúre, ktorú generujú HTML dokumenty. Tu je kompletný návod, ako prechádzať DOM pomocou JavaScriptu.

Čo je to DOM Traversing?

The Objektový model dokumentu, alebo skrátene DOM, je stromová reprezentácia dokumentu HTML. Poskytuje API ktorý vám ako webovým vývojárom umožňuje interagovať s webovou stránkou pomocou JavaScriptu.

Každá položka v DOM je známa ako uzol. Iba prostredníctvom DOM môžete manipulovať so štruktúrou, obsahom a štýlom dokumentu HTML.

Prechádzanie DOM (tiež nazývané chôdza alebo navigácia DOM) je akt výberu uzlov v strome DOM z iných uzlov. Pravdepodobne už poznáte niekoľko spôsobov prístup k prvkom v strome DOM podľa ich ID, triedy alebo názvu značky. Môžete použiť metódy ako napr document.querySelector() a document.getElementById() urobiť tak.

Existujú aj iné metódy, ktoré môžete použiť v spojení na navigáciu DOM efektívnejším a robustnejším spôsobom. Ako si viete predstaviť, je lepšie vyhľadávať z už známeho bodu na mape, ako vykonávať úplné vyhľadávanie.

instagram viewer

Napríklad výber podradeného prvku od jeho rodiča je jednoduchší a efektívnejší ako jeho hľadanie v celom strome.

Vzorový dokument na prechod

Akonáhle budete mať prístup k danému uzlu v strome DOM, môžete pristupovať k jeho súvisiacim uzlom rôznymi spôsobmi. Z vybratého uzla sa v strome DOM môžete pohybovať nadol, nahor alebo do strán.

Prvá metóda zahŕňa vyhľadávanie prvku počnúc najvyšším uzlom (ako je uzol dokumentu) a pohybujúcim sa smerom nadol.

Druhý spôsob je opačný: pohybujete sa od vnútorného prvku hore po strome a hľadáte vonkajší prvok. Posledná metóda je, keď hľadáte prvok z iného prvku na rovnakej úrovni (to znamená, že tieto dva prvky sú súrodenci) v strome dokumentu.

Na demonštráciu zvážte tento príklad HTML dokumentu:

<!DOCTYPE html>
<html jazyk="en">
<hlavu>
<meta znaková sada="UTF-8" />
<meta http-ekviv="X-UA-kompatibilné" obsah ="IE=okraj" />
<meta meno="výrez" obsah ="šírka=šírka zariadenia, počiatočná mierka=1,0" />
<titul>Ukážková stránka</title>
</head>
<telo>
<Hlavná>
<h1>Názov mojej stránky</h1>
<p>Tu je pekný nadpis</str>


<trieda článku="prvý__článok">
<h2>Zoznam úžasných plodov</h2>
<p>Musí jesť ovocie</str>


<trieda div="obal-1">
<ul trieda="apple-list">
<li trieda="jablko">Jablká</li>
<li trieda="oranžová">Pomaranče</li>
<li trieda="avokádo">Avokádo</li>
<li trieda="hrozno">
 Hrozno


<ul>
<li trieda="typ-1">Mesiac klesá</li>
<li>Sultana</li>
<li>Concord</li>
<li>Crimson Seedless</li>
</ul>
</li>
<li trieda="banán">Banány</li>
</ul>


<trieda tlačidiel="btn-1">Prečítajte si celý zoznam</button>
</div>
</article>


<trieda článku="druhý__článok">
<h2>Úžasné miesta v Keni</h2>
<p>Musíte navštíviť miesta v Keni</str>


<trieda div="obal-2">
<ul trieda="zoznam miest">
<li>Masai Mara</li>
<li>Pláž Diani</li>
<li>Pláž Watamu</li>
<li>Národný park Amboseli</li>
<li>Jazero Nakuru</li>
</ul>


<trieda tlačidiel="btn-2">Prečítajte si celý zoznam</button>
</div>
</article>
</main>
</body>
</html>

Prechádzanie DOM smerom nadol

DOM môžete prejsť smerom nadol jedným z dvoch spôsobov. Prvým je metóda spoločného výberu (element.querySelector alebo element.querySelectorAll). Po druhé, môžete použiť deti alebo dieťaNodes nehnuteľnosť. Existujú aj dve ďalšie špeciálne vlastnosti, a to posledné dieťa a prvéDieťa.

Použitie metód výberu

Metódy querySelector() vám umožňujú vyhľadať jeden alebo viacero prvkov, ktoré zodpovedajú danému selektoru. Môžete napríklad vyhľadať prvý prvok pomocou triedy „prvý článok“ pomocou document.querySelector('.first-article'). A získať všetko h2 prvky v dokumente, môžete použiť querySelectorAll metóda: document.querySelectorAll('h2'). The querySelectorAll metóda vráti zoznam uzlov zodpovedajúcich prvkov; každú položku môžete vybrať pomocou zápisu zátvoriek:

konšt nadpisy = dokument.querySelectorAll('h2');
konšt firstHeading = nadpisy[0]; // výber prvého prvku h2
konšt secondHeading = nadpisy[1]; // výber druhého prvku h2

Hlavným úlovkom pri používaní metód selektora je, že musíte použiť príslušné symboly, ak je to vhodné, pred selektorom, ako to robíte v CSS. Napríklad „.classname“ pre triedy a „#id“ pre identifikátory.

Pamätajte, že výsledkom bude prvok HTML, nielen vnútorný obsah vybraného prvku. Na prístup k obsahu môžete použiť uzly innerHTML nehnuteľnosť:

dokument.querySelector('.orange').innerHTML

Používanie vlastností potomkov alebo childNodes

The deti vlastnosť vyberie všetky podradené prvky, ktoré sú priamo pod daným prvkom. Tu je príklad deti nehnuteľnosť v akcii:

konšt appleList = dokument.querySelector('.apple-list');
konšt jablká = appleList.deti; 
konzoly.log (jablká);

Ťažba dreva jablká do konzoly zobrazí množinu všetkých položiek zoznamu priamo pod prvkom s triedou "apple-list" ako kolekciu HTML. Kolekcia HTML je objekt podobný poľu, takže na výber položiek môžete použiť zápis v zátvorkách, ako je to v prípade querySelectorAll.

Na rozdiel od deti nehnuteľnosť, dieťaNodes vráti všetky priame podriadené uzly (nielen podradené prvky). Ak vás zaujímajú iba podradené prvky, povedzte iba položky zoznamu, použite deti nehnuteľnosť.

Používanie špeciálnych vlastností lastChild a firstChild

Tieto dve metódy nie sú také robustné ako prvé dve. Ako napovedajú ich názvy, posledné dieťa a prvéDieťa vlastnosti vracajú posledný a prvý podriadený uzol prvku.

konšt appleList = dokument.querySelector('.apple-list');
konšt firstChild = appleList.firstChild;
konšt lastChild = appleList.lastChild;

Prechádzanie DOM smerom nahor

Nahor po DOM môžete prejsť pomocou parentElement (alebo parentNode) a najbližšie vlastnosti.

Pomocou parentElement alebo parentNode

Obaja parentElement alebo parentNode vlastnosti vám umožňujú vybrať nadradený uzol vybraného prvku o úroveň vyššie. Kritický rozdiel je v tom parentElement vyberie iba nadradený uzol, ktorý je prvkom. Na druhej strane, parentNode môže vybrať rodiča bez ohľadu na to, či ide o prvok alebo iný typ uzla.

V nižšie uvedenej ukážke kódu používame parentElement ak chcete vybrať div s triedou "wrapper-1" z "apple-list":

konšt appleList = dokument.querySelector('.apple-list');
konšt parentDiv = appleList.parentElement; 
konzoly.log (parentDiv); // zobrazí prvok div s class wrapper-1

Použitie najbližšej nehnuteľnosti

The najbližšie vlastnosť vyberie prvý nadradený prvok, ktorý zodpovedá zadanému selektoru. Umožňuje vám vybrať viac úrovní namiesto jednej. Napríklad, ak už máme vybraté tlačidlo s triedou "btn-1", môžeme vybrať Hlavná prvok pomocou najbližšie nehnuteľnosť takto:

konšt btn1 = dokument.querySelector('.btn-1');
const mainEl = btn1.closest('Hlavná');
konzoly.log (mainEl); // zobrazí hlavný prvok

Páči sa mi to querySelector a querySelectorAll, použite príslušné selektory v najbližšie metóda.

Prechádzanie DOM bokom

Existujú dva spôsoby, ako chodiť po DOM bokom. Môžeš použiť nextElementSibling alebo predchádzajúciPrvokSúrodenec. Použite nextElementSibling na výber nasledujúceho súrodeneckého prvku a predchádzajúciPrvokSúrodenec na výber predchádzajúceho súrodenca.

konšt oranžová = dokument.querySelector('.oranžová');
konšt jablko = orange.previousElementSibling;
konšt avokádo = orange.nextElementSibling;

Existujú aj ekvivalentné ďalšíSúrodenec a predchádzajúciSúrodenec vlastnosti, ktoré tiež vyberajú zo všetkých typov uzlov, nielen prvkov.

Urobte viac vďaka reťazeniu vlastností a metód prechodu DOM

Všetky vyššie uvedené metódy a vlastnosti vám umožňujú vybrať ľubovoľný uzol v DOM. V niektorých prípadoch sa však možno budete chcieť najskôr posunúť nahor, potom nadol alebo do strán. V takom prípade sa ukáže ako užitočné reťazenie rôznych vlastností.