Procházení strukturou DOM stromu

Při práci s DOM je užitečné umět procházet hierarchií prvků (traverzovat). Stává se, že jste zvolili nějaký element a na základě jeho pozice ve stromové struktuře DOM, však chcete získat i referenci na sousední prvek, nebo na úplně jiný element v blízkosti. Rozebereme si následně tedy různé metody přístupu k „nodům“ v DOM a hledání konkrétních prvků nebo při manipulaci s DOMem.

Při procházení můžeme procházet nodelisty obsahující pouze elementy, nebo nodelisty které obsahují všechny nody, včetně textů a komentářů.

Procházení do hloubky

Průchod stromu od rodičovského elementu (HTML) až k jednotlivým elementům či nodům (listům).

K prohledání potomů elementu můžeme použít selectory na základě třídy, tagu nebo atributu. Tímto způsobem se rekurzivně nejprve prohledají všichni potomci aktuálního elementu a následně se pokračuje v hledání v dalších větvích stromu. QuerySelektory vrací pouze pouze elementy, které jsou jednodušší na procházení a můžeme s nimi procházet do hloubky i do šířky.

Jiným způsobem je, procházet strukturou od vybraného elementu/nodu, který pro nás bude rodič a využívat jeho vlastnosti. V každém uvedeném případě je „node“ objekt, na který odkazujeme a může být typu elementu, textu nebo komentáře.

Vlastnost node.childNodes která vrací seznam všech přímých potomků elementu jako kolekci - objekt typu NodeList. NodeList má podobně jako pole numerické indexy a lze jím iterovat pomocí for cyklu nebo metody forEach().

Podobně vlastnost node.children vrací seznam pouze elementů. To znamená, že nezahrnuje textové uzly, komentáře ani jiné typy uzlů, ale pouze elementy.

Vlastnosti node.firstChild a node.lastChild jsou vlastnosti DOM nodu, které vrací prvního a posledního přímého potomka. Pokud element nemá žádné přímé potomky, vrátí se hodnota null.

Alternativně můžeme použít node.firstElementChild a node.lastElementChild které vrací jen elementy.

Procházení do šířky

Další způsob procházení DOM stromu, který postupuje nejprve vodorovně, tj. prochází všechny sourozence aktuálního elementu.

Vlastnosti node.nextSibling a node.previousSibling vrací následujícího (next) a předchozího (previous) sourozence aktuálního elementu. Pokud aktuální element nemá žádného následujícího nebo předchozího sourozence, vrací se hodnota null.

Rodiče

Poslední vlastnost node.parentNode vrací rodičovský element aktuálního elementu. Pokud aktuální element nemá žádného rodiče (např. v případě kořenového elementu), vrací se hodnota null.