TOC

Wie man den DOM durchquert

Einführung

Das vorherige Tutorial in dieser Reihe, How to Access Elements in the DOM, beschreibt die Verwendung des Builds -in Methoden des Objekts "+ document ", um über ID, Klasse, Tag-Name und Abfrageselektoren auf HTML-Elemente zuzugreifen. Wir wissen, dass das DOM als https://www.digitalocean.com/community/tutorials/understanding-the-dom-tree-and-nodes[tree of node] mit dem Knoten ` document +` an der Wurzel und strukturiert ist Jeder andere Knoten (einschließlich Elementen, Kommentaren und Textknoten) als die verschiedenen Zweige.

Oft möchten Sie durch das DOM navigieren, ohne zuvor jedes einzelne Element festgelegt zu haben. Wenn Sie lernen möchten, wie Sie im DOM-Baum nach oben und unten navigieren und von Zweig zu Zweig wechseln, müssen Sie wissen, wie Sie mit JavaScript und HTML arbeiten.

In diesem Lernprogramm erfahren Sie, wie Sie das DOM (auch als Gehen oder Navigieren im DOM bezeichnet) mit übergeordneten, untergeordneten und geschwisterlichen Eigenschaften durchlaufen.

Konfiguration

Zunächst erstellen wir eine neue Datei mit dem Namen "+ node.html +", die den folgenden Code enthält.

node.html

<!DOCTYPE html>
<html>

<head>
 <title>Learning About Nodes</title>

 <style>
   * { border: 2px solid #dedede; padding: 15px; margin: 15px; }
   html { margin: 0; padding: 0; }
   body { max-width: 600px; font-family: sans-serif; color: #333; }
 </style>
</head>

<body>
 <h1>Shark World</h1>
 <p>The world's leading source on <strong>shark</strong> related information.</p>
 <h2>Types of Sharks</h2>
 <ul>
   <li>Hammerhead</li>
   <li>Tiger</li>
   <li>Great White</li>
 </ul>
</body>

<script>
 const h1 = document.getElementsByTagName('h1')[0];
 const p = document.getElementsByTagName('p')[0];
 const ul = document.getElementsByTagName('ul')[0];
</script>

</html>

Wenn wir die Datei in einen Webbrowser laden, wird ein Rendering angezeigt, das dem folgenden Screenshot entspricht.

image: https://assets.digitalocean.com/articles/eng_javascript/dom/nodes-before-modification.png [node.html page]

In dieser Beispielwebsite haben wir ein HTML-Dokument mit einigen Elementen. In einem "+ style" -Tag wurde ein grundlegendes CSS hinzugefügt, um jedes Element sichtbar zu machen, und im "+ script a" wurden einige Variablen erstellt, um den Zugriff auf einige Elemente zu erleichtern. Da es jeweils nur einen von + h1 +, + p + und + ul + gibt, können wir auf den ersten Index für die jeweiligen + getElementsByTagName + -Eigenschaften zugreifen.

Wurzelknoten

Das "+ document" -Objekt ist die Wurzel jedes Knotens im DOM. Dieses Objekt ist eigentlich eine Eigenschaft des "+ window " - Objekts, bei dem es sich um das globale Objekt der obersten Ebene handelt, das eine Registerkarte im Browser darstellt. Das Objekt https://developer.mozilla.org/en-US/docs/Web/API/Window [` window `] hat Zugriff auf Informationen wie Symbolleiste, Höhe und Breite des Fensters, Eingabeaufforderungen und Warnungen. Das " Dokument" besteht aus dem, was sich innerhalb des inneren "+ Fensters" befindet.

Unten finden Sie ein Diagramm, das aus den Stammelementen besteht, die in jedem Dokument enthalten sind. Auch wenn eine leere HTML-Datei in einen Browser geladen wird, werden diese drei Knoten hinzugefügt und im DOM analysiert.

Property Node Node Type

document

#document

DOCUMENT_NODE

document.documentElement

html

ELEMENT_NODE

document.head

head

ELEMENT_NODE

document.body

body

ELEMENT_NODE

Da die Elemente "+ html", "+ head" und "+ body " so häufig vorkommen, haben sie ihre eigenen Eigenschaften im " document".

Öffnen Sie die Console in DevTools und testen Sie jede dieser vier Eigenschaften, indem Sie sie senden und die Ausgabe anzeigen. Sie können auch + h1 +, + p + und + ul + testen, wodurch die Elemente aufgrund der Variablen zurückgegeben werden, die wir im Tag + script + hinzugefügt haben.

Übergeordnete Knoten

Die Knoten im DOM werden in Abhängigkeit von ihrer Beziehung zu anderen Knoten als Eltern, Kinder und Geschwister bezeichnet. Der * Parent * eines Knotens ist der Knoten, der sich eine Ebene darüber oder näher am + document + in der DOM-Hierarchie befindet. Es gibt zwei Eigenschaften, um das übergeordnete Element abzurufen - "+ parentNode " und " parentElement +".

Property Gets

parentNode

Parent Node

parentElement

Parent Element Node

In unserem + node.html + Beispiel:

  • + html ist das übergeordnete Element von` + head`, + body und` + script a`.

  • + body + ist das übergeordnete Element von + h1 +, + h2 +, + p + und + ul +, aber nicht + li +, da + li + zwei Ebenen tiefer liegt als + body +.

Mit der Eigenschaft + parentNode + können wir testen, was das übergeordnete Element unseres + p + - Elements ist. Diese + p + Variable stammt aus unserer benutzerdefinierten + document.getElementsByTagName ('p') [0] + Deklaration.

p.parentNode;
Output► <body>...</body>

Das übergeordnete Element von "+ p " ist " body +", aber wie können wir den Großelternteil erhalten, der zwei Ebenen höher liegt? Wir können dies tun, indem wir Eigenschaften miteinander verketten.

p.parentNode.parentNode;
Output► <html>...</html>

Durch zweimaliges Verwenden von "+ parentNode " haben wir die Großeltern von " p +" abgerufen.

Es gibt Eigenschaften, mit denen das übergeordnete Element eines Knotens abgerufen werden kann, jedoch nur einen kleinen Unterschied, wie in diesem Snippet unten gezeigt.

// Assign html object to html variable
const html = document.documentElement;

console.log(html.parentNode); // > #document
console.log(html.parentElement); // > null

Das übergeordnete Element fast jedes Knotens ist ein Elementknoten, da Text und Kommentare nicht übergeordnet zu anderen Knoten sein können. Das übergeordnete Element von "+ html" ist jedoch ein Dokumentknoten. Daher gibt "+ parentElement" "+ null i" zurück. Im Allgemeinen wird "+ parentNode +" häufiger beim Durchlaufen des DOM verwendet.

Kinderknoten

Die * Kinder * eines Knotens sind die Knoten, die eine Ebene darunter liegen. Alle Knoten, die über eine Verschachtelungsebene hinausgehen, werden normalerweise als Nachkommen bezeichnet.

Property Gets

childNodes

Child Nodes

firstChild

First Child Node

lastChild

Last Child Node

children

Element Child Nodes

firstElementChild

First Child Element Node

lastElementChild

Last Child Element Node

Die Eigenschaft + childNodes + gibt eine Live-Liste aller untergeordneten Knoten eines Knotens zurück. Sie können erwarten, dass das Element "+ ul " drei " li +" - Elemente enthält. Testen wir, was es abruft.

ul.childNodes;
Output► (7) [text, li, text, li, text, li, text]

Zusätzlich zu den drei "+ li +" - Elementen erhält es auch vier Textknoten. Dies liegt daran, dass wir unser eigenes HTML geschrieben haben (es wurde nicht von JavaScript generiert) und der Einzug zwischen Elementen im DOM als Textknoten gezählt wird. Dies ist nicht intuitiv, da auf der Registerkarte Elements von DevTools Leerraumknoten entfernt werden.

Wenn wir versuchen, die Hintergrundfarbe des ersten untergeordneten Knotens mit der Eigenschaft "+ firstChild +" zu ändern, schlägt dies fehl, da der erste Knoten Text ist.

ul.firstChild.style.background = 'yellow';
OutputUncaught TypeError: Cannot set property 'background' of undefined

In solchen Situationen sind die Eigenschaften "+ children ", " firstElementChild " und " lastElementChild " vorhanden, um nur die Elementknoten abzurufen. ` ul.children ` gibt nur die drei ` li +` Elemente zurück.

Mit + firstElementChild + können wir die Hintergrundfarbe des ersten + li + im + ul + ändern.

ul.firstElementChild.style.background = 'yellow';

Wenn Sie den obigen Code ausführen, wird Ihre Webseite aktualisiert, um die Hintergrundfarbe zu ändern.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/traverse-1.png [firstElementChild.style.background modification]

Bei grundlegenden DOM-Manipulationen wie in diesem Beispiel sind die elementspezifischen Eigenschaften äußerst hilfreich. In JavaScript-generierten Webanwendungen werden die Eigenschaften, mit denen alle Knoten ausgewählt werden, eher verwendet, da in diesem Fall Leerraum-Zeilenumbrüche und Einrückungen nicht vorhanden sind.

Eine https://www.digitalocean.com/community/tutorials/how-to-construct-for-loops-in-javascript#forof-loop [+ for …​ of +] -Schleife kann verwendet werden, um alle zu durchlaufen + Kinder + Elemente.

for (let element of ul.children) {
 element.style.background = 'yellow';
}

Jetzt hat jedes untergeordnete Element einen gelben Hintergrund.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/traverse-2.png [Änderung der Kinderelemente]

Da unser "+ p " - Element sowohl Text als auch Elemente enthält, ist die " childNodes +" - Eigenschaft hilfreich, um auf diese Informationen zuzugreifen.

for (let element of p.childNodes) {
 console.log(element);
}
Output"The world's leading source on "
<strong>​shark​</strong>​
" related information."

+ childNodes + und + children + geben keine Arrays mit allen Array properties and methods zurück, aber sie erscheinen und verhalten sich ähnlich wie JavaScript-Arrays. Sie können über die Indexnummer auf Knoten zugreifen oder die Eigenschaft "+ length" finden.

document.body.children[3].lastElementChild.style.background = 'fuchsia';

Der obige Code findet das letzte untergeordnete Element (+ li +) des vierten untergeordneten Elements (+ ul +) von + body + und wendet einen Stil an.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/traverse-3.png [letzte untergeordnete Elementänderung]

Mit den übergeordneten und untergeordneten Eigenschaften können Sie jeden Knoten im DOM abrufen.

Geschwisterknoten

Die * Geschwister * eines Knotens sind alle Knoten auf derselben Baumebene im DOM. Geschwister müssen nicht derselbe Knotentyp sein - Text-, Element- und Kommentarknoten können Geschwister sein.

Property Gets

previousSibling

Previous Sibling Node

nextSibling

Next Sibling Node

previousElementSibling

Previous Sibling Element Node

nextElementSibling

Next Sibling Element Node

Geschwistereigenschaften funktionieren genauso wie die untergeordneten Knoten, da es eine Reihe von Eigenschaften zum Durchlaufen aller Knoten und eine Reihe von Eigenschaften nur für Elementknoten gibt. + previousSibling + und + nextSibling + erhalten den nächsten Knoten, der dem angegebenen Knoten unmittelbar vorausgeht oder diesem folgt, und + previousElementSibling + und + nextElementSibling + erhalten nur Elementknoten.

Wählen Sie in unserem Beispiel "+ node.html " das mittlere Element von " ul +" aus.

const tiger = ul.children[1];

Da wir unser DOM von Grund auf erstellt haben und nicht als JavaScript-Webanwendung, müssen wir die Elementeigenschaften verwenden, um auf die vorherigen und nächsten Elementknoten zuzugreifen, da im DOM Leerzeichen vorhanden sind.

tiger.nextElementSibling.style.background = 'coral';
tiger.previousElementSibling.style.background = 'aquamarine';

Das Ausführen dieses Codes sollte "+ coral " auf den Hintergrund von " Hammerhead " und " aquamarine " auf den Hintergrund von " Great White +" angewendet haben.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/traverse-4.png [Änderung des Geschwisterelements]

Geschwistereigenschaften können wie Eltern- und Knoteneigenschaften miteinander verkettet werden.

Fazit

In diesem Lernprogramm wurde erläutert, wie auf die Stammknoten jedes HTML-Dokuments zugegriffen wird und wie der DOM-Baum durch die Eigenschaften von Eltern, Kindern und Geschwistern geführt wird.

Mit dem, was Sie in How to Access Elements in the DOM und diesem Tutorial gelernt haben, sollten Sie dazu in der Lage sein Greifen Sie sicher auf einen beliebigen Knoten im DOM einer beliebigen Website zu.

Related