Das Verständnis des DOM ist in Ihrer Karriere als Webentwickler unerlässlich. Sie sollten wissen, wie Sie verschiedene Elemente im DOM auswählen, damit Sie dann deren Inhalt lesen oder ändern können.

DOM Traversing beschreibt, wie man durch die baumartige Struktur navigiert, die HTML-Dokumente erzeugen. Hier ist eine vollständige Anleitung zum Durchlaufen des DOM mit JavaScript.

Was ist DOM Traversing?

Der Dokumentobjektmodell, kurz DOM, ist eine baumartige Darstellung eines HTML-Dokuments. Es bietet eine API die es Ihnen als Webentwickler ermöglicht, mit einer Website über JavaScript zu interagieren.

Jedes Element im DOM wird als Knoten bezeichnet. Nur über das DOM können Sie die Struktur, den Inhalt und den Stil Ihres HTML-Dokuments manipulieren.

DOM-Traversal (auch Walking oder Navigieren im DOM genannt) ist der Akt des Auswählens von Knoten im DOM-Baum aus anderen Knoten. Sie sind wahrscheinlich bereits mit mehreren Methoden für vertraut Zugriff auf Elemente im DOM-Baum nach ID, Klasse oder Tag-Name. Sie können Methoden wie verwenden

instagram viewer
document.querySelector() Und document.getElementById() dazu.

Es gibt andere Methoden, die Sie in Verbindung verwenden können, um effizienter und robuster durch das DOM zu navigieren. Wie Sie sich vorstellen können, ist es besser, von einem bereits bekannten Punkt auf einer Karte aus zu suchen, als eine vollständige Suche durchzuführen.

Beispielsweise ist es einfacher und effizienter, ein untergeordnetes Element aus seinem übergeordneten Element auszuwählen, als im gesamten Baum danach zu suchen.

Ein Beispieldokument zum Durchlaufen

Sobald Sie Zugriff auf einen bestimmten Knoten in der DOM-Struktur haben, können Sie auf unterschiedliche Weise auf die zugehörigen Knoten zugreifen. Sie können sich von Ihrem ausgewählten Knoten aus im DOM-Baum nach unten, oben oder seitwärts bewegen.

Die erste Methode besteht darin, nach einem Element zu suchen, das mit einem obersten Knoten (wie dem Dokumentknoten) beginnt und sich nach unten bewegt.

Der zweite Weg ist das Gegenteil: Sie bewegen sich von einem inneren Element im Baum nach oben und suchen nach einem äußeren Element. Die letzte Methode ist, wenn Sie nach einem Element von einem anderen Element auf derselben Ebene (was bedeutet, dass die beiden Elemente Geschwister sind) in der Dokumentstruktur suchen.

Betrachten Sie zur Veranschaulichung dieses HTML-Beispieldokument:

<!DOCTYPE html>
<htmllang="en">
<Kopf>
<Metazeichensatz="UTF-8" />
<meta http-equiv="X-UA-kompatibel" Inhalt="IE=Rand" />
<metaname="Ansichtsfenster" Inhalt="width=Gerätebreite, initial-scale=1.0" />
<Titel>Beispielseite</title>
</head>
<Körper>
<hauptsächlich>
<h1>Mein Seitentitel</h1>
<P>Eine schöne Bildunterschrift gehört hierher</P>


<Artikelklasse="erster Artikel">
<h2>Liste erstaunlicher Früchte</h2>
<P>Muss Früchte essen</P>


<div-Klasse="Wrapper-1">
<ul-Klasse="Apfel-Liste">
<li Klasse="Apfel">Äpfel</li>
<li Klasse="orange">Orangen</li>
<li Klasse="Avocado">Avocados</li>
<li Klasse="Traube">
 Trauben


<Ul>
<li Klasse="Typ 1">Mond fällt</li>
<li>Sultanin</li>
<li>Eintracht</li>
<li>Crimson kernlos</li>
</ul>
</li>
<li Klasse="Banane">Bananen</li>
</ul>


<Schaltfläche Klasse="btn-1">Lesen Sie die vollständige Liste</button>
</div>
</article>


<Artikelklasse="zweiter__Artikel">
<h2>Erstaunliche Orte in Kenia</h2>
<P>Muss Orte in Kenia besuchen</P>


<div-Klasse="Verpackung-2">
<ul-Klasse="Orte-Liste">
<li>Masai Mara</li>
<li>Diani-Strand</li>
<li>Watamu-Strand</li>
<li>Amboseli-Nationalpark</li>
<li>See Nakuru</li>
</ul>


<Schaltfläche Klasse="btn-2">Lesen Sie die vollständige Liste</button>
</div>
</article>
</main>
</body>
</html>

Durchqueren des DOM nach unten

Sie können das DOM mit einer von zwei Methoden nach unten durchlaufen. Die erste ist die allgemeine Auswahlmethode (element.querySelector oder element.querySelectorAll). Zweitens können Sie die verwenden Kinder oder untergeordnete Knoten Eigentum. Es gibt noch zwei weitere besondere Eigenschaften, nämlich letztes Kind Und erstes Kind.

Selector-Methoden verwenden

Mit den querySelector()-Methoden können Sie nach einem oder mehreren Elementen suchen, die mit einem bestimmten Selektor übereinstimmen. Beispielsweise können Sie mit der Klasse „erster Artikel“ nach dem ersten Element suchen document.querySelector('.first-article'). Und alle zu holen h2 Elemente im Dokument können Sie die verwenden querySelectorAll Methode: document.querySelectorAll('h2'). Der querySelectorAll Die Methode gibt eine Knotenliste mit übereinstimmenden Elementen zurück; Sie können jedes Element mithilfe der Klammernotation auswählen:

konst Überschriften = dokumentieren.querySelectorAll('h2');
konst ersteÜberschrift = Überschriften[0]; // Auswählen des ersten h2-Elements
konst zweiteÜberschrift = Überschriften[1]; // Auswählen des zweiten h2-Elements

Der größte Haken bei der Verwendung von Selektormethoden ist, dass Sie die entsprechenden Symbole, wo zutreffend, vor dem Selektor verwenden müssen, wie Sie es in CSS tun. Beispiel: „.classname“ für Klassen und „#id“ für IDs.

Denken Sie daran, dass das Ergebnis ein HTML-Element sein wird, nicht nur der innere Inhalt des ausgewählten Elements. Um auf den Inhalt zuzugreifen, können Sie die Knoten verwenden innerHTML Eigentum:

dokumentieren.querySelector('.orange').innerHTML

Verwenden der Eigenschaften children oder childNodes

Der Kinder -Eigenschaft wählt alle untergeordneten Elemente aus, die sich direkt unter einem bestimmten Element befinden. Hier ist ein Beispiel für die Kinder Eigenschaft in Aktion:

konst Apfelliste = dokumentieren.querySelector('.apple-list');
konst Äpfel = Apfelliste.Kinder; 
Konsole.log (Äpfel);

Protokollierung Äpfel an die Konsole zeigt einen Satz aller Listenelemente direkt unter dem Element mit einer "apple-list"-Klasse als HTML-Sammlung an. Eine HTML-Sammlung ist ein Array-ähnliches Objekt, sodass Sie die Klammernotation verwenden können, um Elemente auszuwählen, wie bei querySelectorAll.

im Gegensatz zu den Kinder Eigentum, untergeordnete Knoten gibt alle direkten untergeordneten Knoten zurück (nicht nur untergeordnete Elemente). Wenn Sie nur an untergeordneten Elementen interessiert sind, z. B. nur Listenelemente, verwenden Sie die Kinder Eigentum.

Verwendung spezieller lastChild- und firstChild-Eigenschaften

Diese beiden Methoden sind nicht so robust wie die ersten beiden. Wie ihre Namen vermuten lassen, sind die letztes Kind Und erstes Kind Eigenschaften geben den letzten und ersten untergeordneten Knoten eines Elements zurück.

konst Apfelliste = dokumentieren.querySelector('.apple-list');
konst firstChild = appleList.firstChild;
konst lastChild = appleList.lastChild;

Durchqueren des DOM nach oben

Sie können mit dem DOM nach oben navigieren parentElement (oder Elternknoten) Und am nächsten Eigenschaften.

Verwendung von parentElement oder parentNode

Beide parentElement oder Elternknoten Mit den Eigenschaften können Sie den übergeordneten Knoten des ausgewählten Elements eine Ebene höher auswählen. Der entscheidende Unterschied besteht darin parentElement wählt nur den übergeordneten Knoten, der ein Element ist. Andererseits, Elternknoten kann ein übergeordnetes Element auswählen, unabhängig davon, ob es sich um ein Element oder einen anderen Knotentyp handelt.

Im folgenden Codebeispiel verwenden wir parentElement um das div mit der Klasse "wrapper-1" aus "apple-list" auszuwählen:

konst Apfelliste = dokumentieren.querySelector('.apple-list');
konst parentDiv = appleList.parentElement; 
Konsole.log (parentDiv); // zeigt das div-Element mit der Klasse wrapper-1 an

Verwenden der nächstgelegenen Eigenschaft

Der am nächsten -Eigenschaft wählt das erste übergeordnete Element aus, das mit einem angegebenen Selektor übereinstimmt. Sie können mehrere Ebenen anstelle von einer auswählen. Wenn wir beispielsweise bereits die Schaltfläche mit der Klasse "btn-1" ausgewählt haben, können wir die auswählen hauptsächlich Element mit dem am nächsten Eigenschaft wie folgt:

konst btn1 = dokumentieren.querySelector('.btn-1');
const mainEl = btn1.closest('hauptsächlich');
Konsole.log (mainEl); // zeigt das Hauptelement an

Wie querySelector Und querySelectorAll, verwenden Sie entsprechende Selektoren in der am nächsten Methode.

Durchqueren des DOM seitwärts

Es gibt zwei Methoden, um das DOM seitwärts zu gehen. Sie können verwenden nextElementGeschwister oder vorherigesElementGeschwister. Verwenden nextElementGeschwister um das folgende Geschwisterelement auszuwählen und vorherigesElementGeschwister um das vorherige Geschwister auszuwählen.

konst orange = dokumentieren.querySelector('.orange');
konst Apfel = orange.vorherigesElementGeschwister;
konst Avocado = orange.nextElementSibling;

Es gibt auch Äquivalente nächstesGeschwister Und vorherigeGeschwister Eigenschaften, die auch alle Knotentypen auswählen, nicht nur Elemente.

Machen Sie mehr, indem Sie DOM-Traversal-Eigenschaften und -Methoden verketten

Mit allen oben genannten Methoden und Eigenschaften können Sie jeden beliebigen Knoten im DOM auswählen. In einigen Fällen möchten Sie sich jedoch möglicherweise zuerst nach oben und dann nach unten oder seitwärts bewegen. In diesem Fall erweist sich die Verkettung verschiedener Eigenschaften als praktisch.