DOM-traversering innebærer å bevege seg gjennom dokumentstrukturen ved hjelp av JavaScript for å få tilgang til, endre eller samhandle med ulike noder. DOM-en er strukturert som et tre med noder koblet sammen i et hierarki, inkludert foreldre-, barne- og søsken-relasjoner:

• Foreldrenode: En node som har andre noder plassert inni seg;
• Barnenoder: Noder som ligger direkte inne i en foreldrenode;
• Søskennoder: Noder som deler samme forelder og befinner seg på samme nivå.

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

I denne strukturen:

• <ul> er forelder til <li>-elementene;
• Hver <li> er et barn av <ul>;
• De to <li>-elementene er søsken av hverandre.

Navigering i DOM-en

JavaScript tilbyr flere egenskaper for å navigere disse relasjonene, noe som gjør det mulig å bevege seg effektivt mellom noder.

ParentNode

Egenskapen parentNode gir tilgang til forelderen til den gjeldende noden. Dette er nyttig når du trenger å navigere oppover i DOM-treet.

I dette eksempelet bruker parentNode forelderen <ul> til den valgte <li>, og legger til en ramme rundt hele listen.

ChildNodes

Egenskapen childNodes returnerer en samling av alle underordnede noder til et gitt element, inkludert tekstnoder (mellomrom mellom elementer).

Dette eksemplet velger oppgavelisten og går gjennom dens barn, og legger til polstring på hvert <li>-element.

FirstChild og LastChild

firstChild: Tilgang til det første barnet til et element, inkludert tekstnoder.
lastChild: Tilgang til det siste barnet til et element, inkludert tekstnoder.

Anta at vi trenger å fremheve det første og siste elementet i en handlekurv.

Dette eksemplet fremhever det første og siste elementet i en liste, og viser hvordan man får tilgang til og endrer de første og siste nodene.

Siden firstChild og lastChild ofte refererer til tekstnoder (for eksempel mellomrom) i stedet for faktiske elementnoder (<li>), er det en bedre tilnærming å bruke firstElementChild og lastElementChild, som spesifikt retter seg mot det første og siste barnelementet og hopper over eventuelle tekstnoder.

PreviousSibling og NextSibling

nextSibling: Henter neste søskennode til den nåværende noden.
previousSibling: Henter forrige søskennode til den nåværende noden.

Tenk deg å navigere mellom oppgaver i en gjøremålsliste, der oppgaver markeres som "neste" eller "tidligere fullført."

I dette tilfellet:

• nextSibling går til neste oppgave og markerer den som "neste";
• previousSibling markerer forrige oppgave som fullført.

Men nextSibling og previousSibling peker ofte på tekstnoder (for eksempel mellomrom). For å finne selve elementnodene (<li>), bør vi bruke nextElementSibling og previousElementSibling, som spesifikt hopper over tekstnoder.

Praktisk eksempel: Oppgavebehandler

Tenk deg at vi lager en oppgavebehandler der brukere kan legge til, fremheve og administrere oppgaver. Vi ønsker å oppdatere oppgaver dynamisk, merke den første oppgaven som "prioritet", fremheve neste oppgave som "kommende", og merke den siste oppgaven som "fullført". Dette eksemplet vil demonstrere navigering gjennom DOM ved bruk av parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling og previousElementSibling.

Når knappen "Fremhev oppgaver" trykkes, bruker JavaScript ulike stiler på oppgavene basert på deres posisjon. firstElementChild markerer den første oppgaven som "Prioritet" med fet, gul stil. lastElementChild markerer den siste oppgaven som "Fullført" med grønn farge og gjennomstreking. nextElementSibling fremhever den andre oppgaven som "Kommende" i blått, og hvis det finnes et forrige søsken, får det en blå kant.