DOM-traversering indebærer at bevæge sig gennem dokumentstrukturen ved hjælp af JavaScript for at tilgå, ændre eller interagere med forskellige noder. DOM'en er opbygget som et træ med noder forbundet i et hierarki, herunder forældre, børn og søskende relationer:

• Forældrenode: En node, der har andre noder indlejret i sig;
• Børnenoder: Noder direkte inde i en forældrenode;
• Søskendenoder: Noder, der deler samme forælder og befinder sig på samme niveau.

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

I denne struktur:

• <ul> er forælder til <li> elementerne;
• Hver <li> er et barn af <ul>;
• De to <li> elementer er søskende til hinanden.

Navigering i DOM'en

JavaScript tilbyder flere egenskaber til at navigere disse relationer, hvilket muliggør effektiv bevægelse mellem noder.

ParentNode

Egenskaben parentNode giver adgang til den aktuelle nodes forælder. Den er nyttig, når du skal bevæge dig opad i DOM-træet.

I dette eksempel tilgår parentNode forælderen <ul> til den valgte <li> og tilføjer en kant omkring hele listen.

ChildNodes

Egenskaben childNodes returnerer en samling af alle underordnede noder til et givet element, inklusive tekstnoder (mellemrum mellem elementer).

Dette eksempel vælger opgavelisten og gennemløber dens børn, hvor der tilføjes polstring til hvert <li>-element.

FirstChild og LastChild

firstChild: Giver adgang til det første barn af et element, inklusive tekstnoder.
lastChild: Giver adgang til det sidste barn af et element, inklusive tekstnoder.

Antag, at vi skal fremhæve de første og sidste elementer i en indkøbskurv.

Dette eksempel fremhæver de første og sidste elementer i en liste og demonstrerer, hvordan man får adgang til og ændrer de første og sidste noder.

Da firstChild og lastChild ofte henviser til tekstnoder (som mellemrum) i stedet for de faktiske elementnoder (<li>), er en bedre tilgang at bruge firstElementChild og lastElementChild, som specifikt retter sig mod det første og sidste barnelement og springer eventuelle tekstnoder over.

PreviousSibling og NextSibling

nextSibling: Henter den næste søskende-node til den aktuelle node.
previousSibling: Henter den forrige søskende-node til den aktuelle node.

Forestil dig navigation mellem opgaver i en to-do-liste, hvor opgaver markeres som "næste" eller "tidligere fuldført."

I dette scenarie:

• nextSibling går til næste opgave og markerer den som "næste";
• previousSibling markerer den forrige opgave som fuldført.

Dog peger nextSibling og previousSibling ofte på tekstnoder (såsom mellemrum). For at målrette de faktiske elementnoder (<li>), bør nextElementSibling og previousElementSibling anvendes, da de specifikt springer tekstnoder over.

Praktisk eksempel: Opgavestyring

Forestil dig, at vi opbygger et opgavestyringsværktøj, hvor brugere kan tilføje, fremhæve og administrere opgaver. Vi ønsker dynamisk at opdatere opgaver, markere den første opgave som "prioritet", fremhæve den næste opgave som "kommende" og markere den sidste opgave som "afsluttet". Dette eksempel demonstrerer navigation gennem DOM'en ved brug af parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling og previousElementSibling.

Når knappen "Fremhæv opgaver" klikkes, anvender JavaScript forskellige stilarter på opgaver baseret på deres placering. firstElementChild markerer den første opgave som "Prioritet" med fed, gul stil. lastElementChild markerer den sidste opgave som "Afsluttet" med grøn og gennemstreget effekt. nextElementSibling fremhæver den anden opgave som "Kommende" i blå, og hvis der findes et forrige søskende, får denne en blå kant.