JavaScript/DOM/Node/childNodes

Die Eigenschaft node.childNodes speichert einen Array aus verfügbaren Kindknoten eines Knotens.

Syntax

var nodeList = elementNodeReference.childNodes;

• nodeList: Sammlung von Node-Objekten (live NodeList), die Kindknoten des aktuellen Elements sind

Anwendungsbeispiel ansehen …

function Abfrage() {
  var Anzahl = document.getElementById('derText').childNodes.length;
  var Erster = document.getElementById('derText').childNodes[0].nodeValue;
  var text   = 'Anzahl Kindknoten: <b>' + Anzahl + '<\/b><br>' +
               'Wert des ersten Kindknotens: <b>' + Erster + '<\/b><br>';
  var elem  = document.getElementById('ergebnis');
  elem.innerHTML = text;
}

Das Beispiel enthält einen Textabsatz mit Zeicheninhalt und weiteren Elementen zur Formatierung. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementById('derText') auf das p-Element zugegriffen. Über die Array-Grundeigenschaft length des childNodes-Arrays wird die Anzahl der Kindelemente ermittelt, die das p-Element hat. Der Rückgabewert wird in der Variablen Anzahl gespeichert. Über childNodes[0] wird auf das erste Kindelement zugegriffen. Dessen Inhalt wird mit nodeValue ermittelt. Zur Kontrolle schreibt das Script die Ergebnisse ins Dokument.

Die Anzahl der Kindelemente des p-Elements beträgt übrigens 4:
Das erste Kindelement ist der Zeicheninhalt Text mit ,
das zweite Kindelement das b-Element,
das dritte Kindelement der Zeicheninhalt und ,
und das vierte Kindelement das u-Element.

Wenn ein Knoten keine Kindknoten enthält, hat childNodes den Wert null.

Beachten Sie: Gemäß dem DOM stellt bereits ein Zeilenumbruch oder ein Leerzeichen im Quelltext zwischen Elementknoten einen eigenen Text-Kindknoten dar. Auch HTML-Kommentare sind eigene Knoten. Daran halten sich alle gängigen Browser.

Hinweis:

Öffnen Sie das Beispiel mit Vorschau in einem neuen Tab!
Im Frickl setzt der Parser wieder Whitespace zwischen die Elemente.

gleiches Markup - unterschiedliche Anzahl Kindknoten? ansehen …

  var anzahl1 = document.getElementById("ersteListe").childNodes.length;    
  document.querySelector('#output1').innerText = anzahl1;
  var anzahl2 = document.getElementById("zweiteListe").childNodes.length;    
  document.querySelector('#output2').innerText = anzahl2;

Im Beispiel sind zwei Listen definiert. Beide unterscheiden sich nur dahingehend, dass sich zwischen den einzelnen Elementen der erste Liste keine Leerzeichen oder Zeilenumbrüche befinden. In der zweiten Liste dagegen wurden Leerzeichen und Zeilenumbrüche verwendet. Standardkonforme Browser geben für die erste Liste als Anzahl der Kindknoten 2 aus und für die zweite Liste 5. Die jeweiligen Leerzeichen und Zeilenumbrüche werden als eigene Kindknoten betrachtet.

Weblinks

• W3C: DOM Level 2 node.childNodes
• MDN: node.childNodes