Pochopení DOM je zásadní ve vaší kariéře vývoje webu. Měli byste vědět, jak vybrat různé prvky v DOM, abyste pak mohli číst jejich obsah nebo je upravovat.

Procházení DOM popisuje, jak se pohybovat ve stromové struktuře, kterou HTML dokumenty generují. Zde je kompletní průvodce, jak procházet DOM pomocí JavaScriptu.

Co je to DOM Traversing?

The Objektový model dokumentu, nebo zkráceně DOM, je stromová reprezentace dokumentu HTML. Poskytuje API který vám jako webovým vývojářům umožňuje komunikovat s webem pomocí JavaScriptu.

Každá položka v DOM je známá jako uzel. Pouze prostřednictvím modelu DOM můžete manipulovat se strukturou, obsahem a stylem dokumentu HTML.

Procházení DOM (také nazývané chůze nebo navigace DOM) je akt výběru uzlů ve stromu DOM z jiných uzlů. Pravděpodobně již znáte několik metod přístup k prvkům ve stromu DOM podle jejich ID, třídy nebo názvu značky. Můžete použít metody jako document.querySelector() a document.getElementById() udělat to tak.

Existují další metody, které můžete ve spojení použít k navigaci DOM účinnějším a robustnějším způsobem. Jak si dokážete představit, je lepší hledat z již známého bodu na mapě než provádět úplné vyhledávání.

instagram viewer

Například výběr podřízeného prvku od jeho rodiče je jednodušší a efektivnější než jeho hledání v celém stromu.

Vzorový dokument k procházení

Jakmile budete mít přístup k danému uzlu ve stromu DOM, můžete přistupovat k jeho souvisejícím uzlům různými způsoby. Z vybraného uzlu se můžete ve stromu DOM pohybovat dolů, nahoru nebo do stran.

První metoda zahrnuje hledání prvku počínaje nejvyšším uzlem (jako je uzel dokumentu) a přesouvat se dolů.

Druhý způsob je opačný: pohybujete se od vnitřního prvku po stromě nahoru a hledáte vnější prvek. Poslední metodou je hledání prvku z jiného prvku na stejné úrovni (to znamená, že tyto dva prvky jsou sourozenci) ve stromu dokumentu.

Pro demonstraci zvažte tento příklad HTML dokumentu:

<!DOCTYPE html>
<html jazyk="en">
<hlava>
<meta znaková sada="UTF-8" />
<meta http-equiv="X-UA-kompatibilní" obsah ="IE=hrana" />
<meta jméno="výřez" obsah ="width=device-width, initial-scale=1.0" />
<titul>Ukázková stránka</title>
</head>
<tělo>
<hlavní>
<h1>Název mé stránky</h1>
<p>Sem patří pěkný popisek</str>


<třída článku="první__článek">
<h2>Seznam úžasných plodů</h2>
<p>Musí jíst ovoce</str>


<třída div="obal-1">
<ul třída="apple-list">
<li třída="jablko">jablka</li>
<li třída="oranžový">Pomeranče</li>
<li třída="avokádo">Avokádo</li>
<li třída="hroznový">
 Hrozny


<ul>
<li třída="typ-1">Měsíc klesá</li>
<li>Sultánka</li>
<li>Svornost</li>
<li>Crimson Seedless</li>
</ul>
</li>
<li třída="banán">banány</li>
</ul>


<třída tlačítka="btn-1">Přečtěte si celý seznam</button>
</div>
</article>


<třída článku="druhý__článek">
<h2>Úžasná místa v Keni</h2>
<p>Musí navštívit místa v Keni</str>


<třída div="obal-2">
<ul třída="seznam míst">
<li>Masai Mara</li>
<li>Pláž Diani</li>
<li>Pláž Watamu</li>
<li>Národní park Amboseli</li>
<li>Jezero Nakuru</li>
</ul>


<třída tlačítka="btn-2">Přečtěte si celý seznam</button>
</div>
</article>
</main>
</body>
</html>

Procházení DOM směrem dolů

DOM můžete procházet směrem dolů jedním ze dvou způsobů. První z nich je metoda společného výběru (element.querySelector nebo element.querySelectorAll). Za druhé, můžete použít děti nebo childNodes vlastnictví. Existují také dvě další speciální vlastnosti, a to poslední dítě a první dítě.

Použití metod výběru

Metody querySelector() umožňují vyhledat jeden nebo více prvků, které odpovídají danému selektoru. Můžete například vyhledat první prvek pomocí třídy „first-article“ pomocí document.querySelector('.first-article'). A získat všechny h2 prvků v dokumentu, můžete použít querySelectorAll metoda: document.querySelectorAll('h2'). The querySelectorAll metoda vrací seznam uzlů odpovídajících prvků; každou položku můžete vybrat pomocí notace v závorkách:

konst nadpisy = dokument.querySelectorAll('h2');
konst firstHeading = nadpisy[0]; // výběr prvního prvku h2
konst secondHeading = nadpisy[1]; // výběr druhého prvku h2

Hlavním úlovkem při používání metod selektoru je, že musíte použít příslušné symboly, kde je to vhodné, před selektorem, jako to děláte v CSS. Například „.classname“ pro třídy a „#id“ pro ID.

Pamatujte, že výsledkem bude prvek HTML, nikoli pouze vnitřní obsah vybraného prvku. Pro přístup k obsahu můžete použít uzel vnitřní HTML vlastnictví:

dokument.querySelector('.orange').innerHTML

Použití vlastností potomků nebo childNodes

The děti vlastnost vybere všechny podřízené prvky, které jsou přímo pod daným prvkem. Zde je příklad děti nemovitost v akci:

konst appleList = dokument.querySelector('.apple-list');
konst jablka = appleList.children; 
řídicí panel.log (jablka);

Protokolování jablka na konzoli zobrazí sadu všech položek seznamu přímo pod prvkem s třídou "apple-list" jako kolekci HTML. Kolekce HTML je objekt podobný poli, takže k výběru položek můžete použít závorku, jako u querySelectorAll.

Na rozdíl od děti vlastnictví, childNodes vrátí všechny přímé podřízené uzly (nejen podřízené prvky). Pokud vás zajímají pouze podřízené prvky, řekněme pouze položky seznamu, použijte děti vlastnictví.

Použití speciálních vlastností lastChild a firstChild

Tyto dvě metody nejsou tak robustní jako první dvě. Jak napovídají jejich názvy, poslední dítě a první dítě vlastnosti vracejí poslední a první podřízený uzel prvku.

konst appleList = dokument.querySelector('.apple-list');
konst firstChild = appleList.firstChild;
konst lastChild = appleList.lastChild;

Procházení DOM směrem nahoru

Nahoru DOM můžete procházet pomocí parentElement (nebo parentNode) a nejbližší vlastnosti.

Pomocí parentElement nebo parentNode

Oba parentElement nebo parentNode vlastnosti umožňují vybrat nadřazený uzel vybraného prvku o úroveň výš. Kritický rozdíl je v tom parentElement vybere pouze nadřazený uzel, který je prvkem. Na druhou stranu, parentNode může vybrat rodiče bez ohledu na to, zda se jedná o prvek nebo jiný typ uzlu.

V níže uvedené ukázce kódu používáme parentElement pro výběr div s třídou "wrapper-1" z "apple-list":

konst appleList = dokument.querySelector('.apple-list');
konst parentDiv = appleList.parentElement; 
řídicí panel.log (parentDiv); // zobrazí prvek div s class wrapper-1

Použití nejbližší nemovitosti

The nejbližší vlastnost vybere první nadřazený prvek, který odpovídá zadanému selektoru. Umožňuje vám vybrat více úrovní namísto jedné. Například, pokud již máme vybrané tlačítko s třídou "btn-1", můžeme vybrat hlavní prvek pomocí nejbližší nemovitost takto:

konst btn1 = dokument.querySelector('.btn-1');
const mainEl = btn1.closest('hlavní');
řídicí panel.log (mainEl); // zobrazí hlavní prvek

Jako querySelector a querySelectorAll, použijte příslušné selektory v nejbližší metoda.

Procházení DOM bokem

Pro chůzi po DOM do stran jsou k dispozici dvě metody. Můžeš použít nextElementSibling nebo předchozíElementSourozenec. Použití nextElementSibling pro výběr následujícího sourozeneckého prvku a předchozíElementSourozenec pro výběr předchozího sourozence.

konst oranžová = dokument.querySelector('.oranžová');
konst jablko = orange.previousElementSibling;
konst avokádo = pomeranč.nextElementSibling;

Existují také ekvivalentní dalšíSourozenec a předchozíSourozenec vlastnosti, které také vybírají ze všech typů uzlů, nejen prvků.

Udělejte více díky řetězení vlastností a metod procházení DOM

Všechny výše uvedené metody a vlastnosti vám umožní vybrat jakýkoli uzel v DOM. V některých případech se však možná budete chtít posunout nejprve nahoru, pak dolů nebo do stran. V takovém případě se vám bude hodit řetězení různých vlastností dohromady.