DOM-traversering innebär att förflytta sig genom dokumentstrukturen med JavaScript för att komma åt, ändra eller interagera med olika noder. DOM:en är strukturerad som ett träd med noder kopplade i en hierarki, inklusive föräldra-, barn- och syskonrelationer:

• Föräldranod: En nod som har andra noder inbäddade i sig;
• Barnnoder: Noder direkt inuti en föräldranod;
• Syskonnoder: Noder som delar samma förälder och befinner sig på samma nivå.

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

I denna struktur:

• <ul> är förälder till <li>-elementen;
• Varje <li> är ett barn till <ul>;
• De två <li>-elementen är syskon till varandra.

Navigera i DOM:en

JavaScript tillhandahåller flera egenskaper för att navigera dessa relationer, vilket möjliggör effektiv förflyttning mellan noder.

ParentNode

Egenskapen parentNode gör det möjligt att komma åt den aktuella nodens förälder. Den är användbar när du behöver navigera uppåt i DOM-trädet.

I det här exemplet använder parentNode för att komma åt föräldern <ul> till den valda <li> och lägger till en ram runt hela listan.

ChildNodes

Egenskapen childNodes returnerar en samling av alla barnnoder till ett givet element, inklusive textnoder (mellanrum mellan element).

Detta exempel väljer uppgiftslistan och loopar igenom dess barn, och lägger till utfyllnad på varje <li>-element.

FirstChild och LastChild

firstChild: Åtkomst till det första barnet av ett element, inklusive textnoder.
lastChild: Åtkomst till det sista barnet av ett element, inklusive textnoder.

Anta att vi behöver markera det första och sista objektet i en kundvagn.

Detta exempel markerar det första och sista objektet i en lista och visar hur man får åtkomst till och ändrar de första och sista noderna.

Eftersom firstChild och lastChild ofta refererar till textnoder (som blanksteg) istället för faktiska elementnoder (<li>) – är en bättre metod att använda firstElementChild och lastElementChild, som specifikt riktar in sig på det första och sista barnelementet och hoppar över eventuella textnoder.

PreviousSibling och NextSibling

nextSibling: Hämtar nästa syskonnod till den aktuella noden.
previousSibling: Hämtar föregående syskonnod till den aktuella noden.

Tänk dig att navigera mellan uppgifter i en att-göra-lista, där uppgifter markeras som "nästa på tur" eller "tidigare slutförd."

I detta scenario:

• nextSibling flyttar till nästa uppgift och markerar den som "nästa på tur";
• previousSibling markerar föregående uppgift som slutförd.

Dock pekar nextSibling och previousSibling ofta på textnoder (till exempel blanksteg). För att rikta in sig på faktiska elementnoder (<li>), bör vi använda nextElementSibling och previousElementSibling, som specifikt hoppar över textnoder.

Praktiskt exempel: Uppgiftshanterare

Föreställ dig att vi bygger en uppgiftshanterare där användare kan lägga till, markera och hantera uppgifter. Vi vill dynamiskt uppdatera uppgifter, markera den första uppgiften som "prioritet", markera nästa uppgift som "kommande" och markera den sista uppgiften som "slutförd". Detta exempel visar hur man navigerar genom DOM med hjälp av parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling och previousElementSibling.

När knappen "Markera uppgifter" klickas, tillämpar JavaScript olika stilar på uppgifterna beroende på deras position. firstElementChild markerar den första uppgiften som "Prioritet" med fet, gul stil. lastElementChild markerar den sista uppgiften som "Slutförd" med grön färg och genomstruken effekt. nextElementSibling markerar den andra uppgiften som "Kommande" i blått, och om ett föregående syskon finns får det en blå ram.