Node: childNodes-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die schreibgeschützte childNodes-Eigenschaft der Node-Schnittstelle gibt eine Live-NodeList von Kind-nodes des angegebenen Elements zurück, wobei dem ersten Kind-Node der Index 0 zugewiesen wird. Kind-Knoten umfassen Elemente, Text und Kommentare.
Hinweis:
Die Tatsache, dass die NodeList live ist, bedeutet, dass sich ihr Inhalt jedes Mal ändert, wenn neue Kinder hinzugefügt oder entfernt werden.
Browser fügen einem Dokument Textknoten hinzu, um Leerzeichen im Quellmarkup darzustellen. Daher kann ein Knoten, der zum Beispiel mit Node.childNodes[0] abgerufen wird, auf einen Leerzeichentextknoten verweisen, anstelle des eigentlichen Elements, das der Autor beabsichtigt, abzurufen.
Weitere Informationen finden Sie unter Arbeiten mit Leerzeichen im DOM.
Die Elemente in der Sammlung von Knoten sind Objekte, keine Zeichenketten. Um Daten aus Knotenobjekten zu erhalten, verwenden Sie deren Eigenschaften. Zum Beispiel können Sie den Namen des ersten childNode mit elementNodeReference.childNodes[0].nodeName erhalten.
Das document-Objekt selbst hat zwei Kinder: die Doctype-Deklaration und das Wurzelelement, das typischerweise als documentElement bezeichnet wird. In HTML-Dokumenten ist letzteres das <html>-Element.
Es ist wichtig zu beachten, dass childNodes alle Knoten umfasst, einschließlich Nicht-Element-Knoten wie Text und Kommentare. Um eine Sammlung zu erhalten, die nur Elemente enthält, verwenden Sie stattdessen Element.children.
Wert
Eine Live-NodeList, die die Kinder des Knotens enthält.
Hinweis:
Mehrere Aufrufe von childNodes geben dieselbe NodeList zurück.
Beispiele
Einfache Verwendung
// Note that para is an object reference to a <p> element
// First check that the element has child nodes
if (para.hasChildNodes()) {
let children = para.childNodes;
for (const node of children) {
// Do something with each child as children[i]
// NOTE: List is live! Adding or removing children will change the list's `length`
}
}
Alle Kinder eines Knotens entfernen
// This is one way to remove all children from a node
// box is an object reference to an element
while (box.firstChild) {
// The list is LIVE so it will re-index each call
box.removeChild(box.firstChild);
}
Spezifikationen
| Specification |
|---|
| DOM # ref-for-dom-node-childnodes① |