DOM-Traversierung bezeichnet das Durchlaufen der Dokumentstruktur mit JavaScript, um verschiedene Knoten zu erreichen, zu verändern oder mit ihnen zu interagieren. Der DOM ist als Baum mit Knoten in einer Hierarchie aufgebaut, die Eltern-, Kind- und Geschwisterbeziehungen umfasst:

• Elternknoten: Ein Knoten, der andere Knoten in sich verschachtelt hat;
• Kindknoten: Knoten, die sich direkt innerhalb eines Elternknotens befinden;
• Geschwisterknoten: Knoten, die denselben Elternknoten haben und sich auf derselben Ebene befinden.

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

In dieser Struktur:

• <ul> ist das Elternelement der <li>-Elemente;
• Jedes <li> ist ein Kindelement von <ul>;
• Die beiden <li>-Elemente sind Geschwister zueinander.

Navigation im DOM

JavaScript stellt verschiedene Eigenschaften zur Verfügung, um diese Beziehungen zu navigieren und einen effizienten Wechsel zwischen Knoten zu ermöglichen.

ParentNode

Die Eigenschaft parentNode ermöglicht den Zugriff auf das übergeordnete Element des aktuellen Knotens. Sie ist nützlich, wenn im DOM-Baum nach oben navigiert werden muss.

In diesem Beispiel greift parentNode auf das übergeordnete <ul>-Element des ausgewählten <li> zu und fügt dem gesamten Listenbereich einen Rahmen hinzu.

ChildNodes

Die Eigenschaft childNodes gibt eine Sammlung aller Kindknoten eines bestimmten Elements zurück, einschließlich Textknoten (Leerzeichen zwischen Elementen).

In diesem Beispiel wird die Aufgabenliste ausgewählt und durch ihre Kinder iteriert, wobei jedem <li>-Element ein Abstand hinzugefügt wird.

FirstChild und LastChild

firstChild: Greift auf das erste Kind eines Elements zu, einschließlich Textknoten.
lastChild: Greift auf das letzte Kind eines Elements zu, einschließlich Textknoten.

Angenommen, wir müssen das erste und das letzte Element in einem Warenkorb hervorheben.

Dieses Beispiel hebt das erste und das letzte Element in einer Liste hervor und zeigt, wie auf die ersten und letzten Knoten zugegriffen und diese verändert werden können.

Da firstChild und lastChild häufig auf Textknoten (wie Leerzeichen) statt auf die tatsächlichen Elementknoten (<li>) verweisen, ist es besser, firstElementChild und lastElementChild zu verwenden. Diese greifen gezielt auf das erste bzw. letzte Kindelement zu und überspringen dabei alle Textknoten.

PreviousSibling und NextSibling

nextSibling: Ruft den nächsten Geschwisterknoten des aktuellen Knotens ab.
previousSibling: Ruft den vorherigen Geschwisterknoten des aktuellen Knotens ab.

Stellen Sie sich vor, Sie navigieren zwischen Aufgaben in einer To-Do-Liste und markieren Aufgaben als „als Nächstes“ oder „zuvor abgeschlossen“.

In diesem Szenario:

• nextSibling wechselt zur nächsten Aufgabe und markiert sie als „als Nächstes“;
• previousSibling markiert die vorherige Aufgabe als abgeschlossen.

Allerdings verweisen nextSibling und previousSibling häufig auf Textknoten (wie Leerzeichen). Um gezielt die tatsächlichen Elementknoten (<li>) anzusprechen, sollten nextElementSibling und previousElementSibling verwendet werden, da diese gezielt Textknoten überspringen.

Praktisches Beispiel: Aufgabenmanager

Stellen Sie sich vor, wir entwickeln einen Aufgabenmanager, in dem Benutzer Aufgaben hinzufügen, hervorheben und verwalten können. Aufgaben sollen dynamisch aktualisiert werden, wobei die erste Aufgabe als "Priorität" markiert, die nächste Aufgabe als "Bevorstehend" hervorgehoben und die letzte Aufgabe als "Abgeschlossen" gekennzeichnet wird. Dieses Beispiel zeigt, wie man mit parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling und previousElementSibling durch den DOM navigiert.

Wenn die Schaltfläche "Aufgaben hervorheben" angeklickt wird, wendet JavaScript je nach Position unterschiedliche Stile auf die Aufgaben an. Das firstElementChild markiert die erste Aufgabe als "Priorität" mit fetter, gelber Formatierung. lastElementChild kennzeichnet die letzte Aufgabe als "Abgeschlossen" mit grüner Farbe und Durchstreichung. Das nextElementSibling hebt die zweite Aufgabe als "Bevorstehend" in Blau hervor, und falls ein vorheriges Geschwisterelement existiert, erhält dieses einen blauen Rahmen.