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 July 2015.

Die schreibgeschützte childNodes-Eigenschaft der Node-Schnittstelle gibt eine Live-NodeList der Kind-nodes des gegebenen Elements zurück, wobei dem ersten Kindknoten der Index 0 zugewiesen wird. Kindknoten umfassen Elemente, Text und Kommentare.

Hinweis: Dass die NodeList live ist, bedeutet, dass sich ihr Inhalt ändert, jedes Mal wenn neue Kinder hinzugefügt oder entfernt werden.

Browser fügen Textknoten in ein Dokument ein, um Leerzeichen im Quellmarkup darzustellen. Daher kann ein Knoten, der zum Beispiel mit Node.childNodes[0] abgerufen wird, sich auf einen Leerzeichen-Textknoten beziehen, anstatt auf das tatsächliche Element, das der Autor in der Absicht hatte zu erhalten.

Siehe Leerzeichen im DOM für mehr Informationen.

Die Elemente innerhalb der Sammlung von Knoten sind Objekte, keine Zeichenketten. Um Daten aus Knotenobjekten zu erhalten, verwenden Sie deren Eigenschaften. Um beispielsweise den Namen des ersten childNode zu erhalten, können Sie elementNodeReference.childNodes[0].nodeName verwenden.

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 Kindknoten einschließt, einschließlich Nicht-Element-Knoten wie Text und Kommentar. 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 die gleiche NodeList zurück.

Beispiele

Einfache Verwendung

js
// 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`
  }
}

Entfernen aller Kinder von einem Knoten

js
// 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 Standard
# ref-for-dom-node-childnodes①

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch