Verstehen der DOM-Hierarchie

DOM-Traversierung beinhaltet das Durchlaufen der Dokumentstruktur mit JavaScript, um auf verschiedene Knoten zuzugreifen, sie zu ändern oder mit ihnen zu interagieren. Der DOM ist als Baum mit Knoten strukturiert, die in einer Hierarchie verbunden sind, einschließlich Eltern-, Kind- und Geschwister-Beziehungen:

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

In dieser Struktur:

• <ul> ist das Elternteil der <li>-Elemente;
• Jedes <li> ist ein Kind des <ul>;
• Die beiden <li>-Elemente sind Geschwister voneinander.

Navigieren im DOM

JavaScript bietet mehrere Eigenschaften, um diese Beziehungen zu navigieren, sodass Sie effizient zwischen Knoten wechseln können.

ParentNode

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

In diesem Beispiel greift parentNode auf das übergeordnete <ul> des ausgewählten <li> zu und fügt einen Rahmen um die gesamte Liste hinzu.

ChildNodes

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

Dieses Beispiel wählt die Aufgabenliste aus und durchläuft deren Kinder, wobei jedem <li>-Element ein Padding 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 die ersten und letzten Elemente in einem Einkaufswagen hervorheben.

Dieses Beispiel hebt die ersten und letzten Elemente in einer Liste hervor und zeigt, wie man auf die ersten und letzten Knoten zugreift und diese modifiziert.

Da firstChild und lastChild oft auf Textknoten (wie Leerzeichen) anstatt auf die tatsächlichen Elementknoten (<li>) verweisen - ist es besser, firstElementChild und lastElementChild zu verwenden, die speziell die ersten und letzten Kind-Elemente ansprechen und dabei Textknoten überspringen.

PreviousSibling und NextSibling

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

Betrachten Sie das Navigieren zwischen Aufgaben in einer To-Do-Liste, um Aufgaben als "als nächstes" oder "bereits abgeschlossen" zu markieren.

In diesem Szenario:

• nextSibling bewegt sich zur nächsten Aufgabe und markiert sie als "als nächstes";
• previousSibling markiert die vorherige Aufgabe als abgeschlossen.

Allerdings verweisen nextSibling und previousSibling oft auf Textknoten (wie Leerzeichen). Um die tatsächlichen Elementknoten (<li>) anzusprechen, sollten wir nextElementSibling und previousElementSibling verwenden, die speziell Textknoten überspringen.

Praktisches Beispiel: Aufgabenmanager

Stellen Sie sich vor, wir bauen einen Aufgabenmanager, bei dem Benutzer Aufgaben hinzufügen, hervorheben und verwalten können. Wir möchten Aufgaben dynamisch aktualisieren, die erste Aufgabe als "Priorität" markieren, die nächste Aufgabe als "bevorstehend" hervorheben und die letzte Aufgabe als "abgeschlossen" markieren. Dieses Beispiel zeigt, wie man durch das DOM navigiert, indem parentNode, childNodes, firstElementChild, lastElementChild, nextElementSibling und previousElementSibling verwendet werden.

Wenn die Schaltfläche "Aufgaben hervorheben" geklickt wird, wendet JavaScript unterschiedliche Stile auf Aufgaben basierend auf ihrer Position an. Das firstElementChild markiert die erste Aufgabe als "Priorität" mit fettgedrucktem, gelbem Stil. lastElementChild markiert die letzte Aufgabe als "Abgeschlossen" mit grünen und durchgestrichenen Effekten. Das nextElementSibling hebt die zweite Aufgabe als "Bevorstehend" in Blau hervor, und wenn ein vorheriges Geschwisterelement existiert, erhält es einen blauen Rand.