DOM-traversering betreft het doorlopen van de documentstructuur met JavaScript om verschillende knooppunten te benaderen, te wijzigen of ermee te interageren. De DOM is opgebouwd als een boomstructuur met knooppunten die in een hiërarchie zijn verbonden, waaronder ouder-, kind- en broer/zus-relaties:

• Ouderknooppunt: Een knooppunt dat andere knooppunten bevat;
• Kindknooppunten: Knooppunten die direct binnen een ouderknooppunt liggen;
• Broer/zus-knooppunten: Knooppunten die dezelfde ouder delen en zich op hetzelfde niveau bevinden.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

In deze structuur:

• <ul> is de ouder van de <li>-elementen;
• Elke <li> is een kind van de <ul>;
• De twee <li>-elementen zijn elkaars broers/zussen.

Navigeren door de DOM

JavaScript biedt verschillende eigenschappen om deze relaties te navigeren, waardoor efficiënt tussen knooppunten kan worden bewogen.

ParentNode

De eigenschap parentNode geeft toegang tot de ouder van de huidige node. Dit is nuttig wanneer je omhoog wilt navigeren in de DOM-boom.

In dit voorbeeld gebruikt parentNode de ouder-<ul> van het geselecteerde <li> en voegt een rand toe rond de volledige lijst.

ChildNodes

De eigenschap childNodes retourneert een verzameling van alle kindknooppunten van een gegeven element, inclusief tekstknooppunten (witruimte tussen elementen).

Dit voorbeeld selecteert de takenlijst en doorloopt de kinderen ervan, waarbij aan elk <li>-element opvulling wordt toegevoegd.

FirstChild en LastChild

firstChild: Toegang tot het eerste kind van een element, inclusief tekstknooppunten.
lastChild: Toegang tot het laatste kind van een element, inclusief tekstknooppunten.

Stel dat we het eerste en laatste item in een winkelwagen moeten markeren.

Dit voorbeeld markeert het eerste en laatste item in een lijst en laat zien hoe je toegang krijgt tot en wijzigingen aanbrengt in de eerste en laatste knooppunten.

Omdat firstChild en lastChild vaak verwijzen naar tekstknooppunten (zoals witruimte) in plaats van de daadwerkelijke elementknooppunten (<li>), is het beter om firstElementChild en lastElementChild te gebruiken. Deze richten zich specifiek op het eerste en laatste kindelement en slaan tekstknooppunten over.

PreviousSibling en NextSibling

nextSibling: Haalt het volgende sibling-node van de huidige node op.
previousSibling: Haalt het vorige sibling-node van de huidige node op.

Denk aan het navigeren tussen taken in een takenlijst, waarbij taken worden gemarkeerd als "volgende" of "eerder voltooid."

In dit scenario:

• nextSibling gaat naar de volgende taak en markeert deze als "volgende";
• previousSibling markeert de vorige taak als voltooid.

Echter, nextSibling en previousSibling verwijzen vaak naar tekstnodes (zoals witruimte). Om daadwerkelijk de elementnodes (<li>) te targeten, moeten we nextElementSibling en previousElementSibling gebruiken, die specifiek tekstnodes overslaan.

Praktisch Voorbeeld: Taakbeheerder

Stel je voor dat we een taakbeheerder bouwen waarin gebruikers taken kunnen toevoegen, markeren en beheren. We willen taken dynamisch bijwerken, de eerste taak als "prioriteit" markeren, de volgende taak als "aankomend" markeren en de laatste taak als "voltooid" aanduiden. Dit voorbeeld laat zien hoe je door de DOM navigeert met behulp van parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling en previousElementSibling.

Wanneer op de knop "Taken markeren" wordt geklikt, past JavaScript verschillende stijlen toe op taken op basis van hun positie. De firstElementChild markeert de eerste taak als "Prioriteit" met vetgedrukte, gele opmaak. lastElementChild markeert de laatste taak als "Voltooid" met groene kleur en doorhaling. De nextElementSibling markeert de tweede taak als "Aankomend" in het blauw, en als er een vorige sibling bestaat, krijgt deze een blauwe rand.