Start · Sprachen · JavaScript · Referenz · Node.childNodes

Node.childNodes

Eigenschaft

Die schreibgeschützte Eigenschaft <code>childNodes</code> gibt eine live <code>NodeList</code> der Kindknoten eines Knotens zurück.

Kategorie: web-api

Signatur

Node.childNodes

Beschreibung

Die schreibgeschützte Eigenschaft childNodes des Node-Interfaces gibt eine live NodeList der Kind-Nodes des gegebenen Elements zurück, wobei dem ersten Kindknoten der Index 0 zugewiesen wird. Kindknoten schließen Elemente, Text und Kommentare ein.

Die Elemente in der Sammlung von Knoten sind Objekte, keine Strings. Um Daten aus Knotenobjekten zu erhalten, verwendet man deren Eigenschaften. Zum Beispiel kann man den Namen des ersten childNode mit elementNodeReference.childNodes[0].nodeName abrufen.

Das document-Objekt selbst hat zwei Kinder: die Doctype-Deklaration und das Wurzelelement, typischerweise als documentElement bezeichnet. 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, verwendet man stattdessen Element.children.

Wert

Eine live NodeList, die die Kinder des Knotens enthält.

Rückgabewert

Typ
NodeList
Beschreibung
Eine live NodeList, die die Kinder des Knotens enthält.

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);
}

// Wichtig · Fallstricke

Die NodeList ist live, das heißt ihr Inhalt ändert sich jedes Mal, wenn neue Kinder hinzugefügt oder entfernt werden.

Browser fügen Textknoten in ein Dokument ein, um Whitespace im Quell-Markup zu repräsentieren. Daher kann ein z. B. mit Node.childNodes[0] erhaltener Knoten sich auf einen Whitespace-Textknoten beziehen statt auf das eigentliche Element, das der Autor erhalten wollte.

Mehrere Aufrufe von childNodes geben dieselbe NodeList zurück.