JavaScript-Knotenliste
- Einführung in HTML-DOM-Knoten
-
JavaScript-Objekt
NodeList -
Statische vs. Live-
NodeList-Objekte -
Operationen auf dem
NodeList-Objekt
HTML DOM steht für Document Object Model und ist eine Schnittstelle für HTML-Dokumente. Es behandelt jede Webseite oder jedes Dokument als eine Baumstruktur, die aus einer Sammlung von Knoten besteht.
Einfach ausgedrückt ist ein Knoten ein Objekt des Webdokuments. Diese Knoten werden hierarchisch in einem DOM-Dokument platziert.
Außerdem können sie übergeordnete und untergeordnete Knoten haben.
Einführung in HTML-DOM-Knoten
Nehmen wir an, wir haben eine HTML-Seite, wie im Folgenden gezeigt.
<!DOCTYPE html>
<html>
<head>
<!-- This is the page head -->
<title>DOM Node Example</title>
</head>
<body>
<!-- This is the page body -->
<h2>DOM Node Demo</h2>
<p id="body-content">This article is about DOM NodeList.</p>
</body>
</html>
Die obige HTML-Seite wird vom Browser als Baumstruktur interpretiert. Daher könnte es wie folgt aussehen.
|-doctype: html
|-HTML
-|HEAD
-|TITLE
-|text: DOM Node Example
-|BODY
-|comment: This is the page body
-|H2
-|text: DOM Node Demo
-|P id="body-content"
-|text: This article is about DOM NodeList.
Jedes HTML-Tag ist ein DOM-Knoten, aber Knoten sind nicht auf HTML-Tags beschränkt. Auch die HTML-Texte und -Kommentare gelten als DOM-Knoten.
Daher sind die HTML-Knoten und -Elemente zwei verschiedene Dinge, wobei die HTML-Elemente ein Untertyp von DOM-Knoten sind.
JavaScript-Objekt NodeList
Wie der Name schon sagt, ist ein NodeList-Objekt eine Sammlung von DOM-Knoten. Es ist dem HTMLCollection-Objekt mit kleinen Unterschieden sehr ähnlich; wie das HTMLCollection-Objekt kann mit dem Namen und der ID zugegriffen werden, aber die NodeList-Objekte unterstützen nur den indexbasierten Zugriff.
Außerdem enthält die HTMLCollection nur die Knoten vom Typ Node.ELEMENT_NODE. Die NodeList-Objekte können verschiedene Arten von Knoten enthalten, wie z. B. Attributknoten, Textknoten und Kommentarknoten, einschließlich Elementknoten.
Es gibt zwei Arten von NodeList-Objekten, live und statisch, die im folgenden Abschnitt besprochen werden.
Statische vs. Live-NodeList-Objekte
Die Eigenschaft childNodes im Objekt document gibt ein NodeList-Objekt zurück, das wir als Live NodeList bezeichnet haben. Denn dieses Objekt ist automatisch von den DOM-Änderungen betroffen.
Lassen Sie uns die Browser-Konsole verwenden, um mit JavaScript auf das oben erwähnte HTML-Dokument zuzugreifen, wie im Folgenden gezeigt.
const bodyContent = document.getElementById('body-content');
var nodeListForBody = bodyContent.childNodes;
console.log(nodeListForBody);
Ausgang:
Wie erwartet wurde das Objekt NodeList von der Eigenschaft childNodes zurückgegeben. Prüfen wir die Länge des Objekts nodeListForBody.
console.log(nodeListForBody.length);
Ausgang:
Lassen Sie uns ein neues untergeordnetes Element an das Absatzelement anhängen, wie im Folgenden gezeigt.
bodyContent.appendChild(document.createElement('div'));
Dann prüfen wir die Länge der NodeList nodeListForBody wie im Folgenden gezeigt.
console.log(nodeListForBody.length);
Ausgang:
Da die DOM-Modifikation die Länge des nodeListForBody geändert hat, ist es ein aktives NodeList-Objekt.
Im Gegensatz zu den Live-Objekten NodeList wird die statische NodeList nicht von den DOM-Änderungen beeinflusst. Üblicherweise gibt die Methode document.querySelectorAll() ein statisches NodeList-Objekt zurück.
Operationen auf dem NodeList-Objekt
Eine NodeList ist kein Array. Wir können eine NodeList anhand ihres Indexes durchlaufen, was einem JavaScript-Array ähnelt, aber keine der Array-Operationen wie pop(), push() und join() unterstützt.
Greifen wir auf den ersten Knoten der obigen NodeList zu: nodeListForBody über seinen Index 0.
console.log(nodeListForBody[0]);
Ausgang:
Eine NodeList lässt sich mit der Array.from()-Methode ganz einfach in ein typisches JavaScript-Array umwandeln.
const nodeListAsArray = Array.from(nodeListForBody)
console.log(nodeListAsArray);
Ausgang:
Wie erwartet wurde die obige NodeList nodeListForBody in ein Array nodeListAsArray umgewandelt.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.