JavaScript/DOM/Node/childNodes

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

  • DOM 1.0
  • JavaScript 1.5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Syntax

var nodeList = elementNodeReference.childNodes;

  • nodeList: Sammlung von Node-Objekten, die Kindknoten des aktuellen Elements sind

[Bearbeiten] Anwendungsbeispiel

Beispiel 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 bis auf ältere Versionen des Internet Explorer (6-8) unter Windows. Diese ignorieren solche "Leerraum"-Zeichen zwischen Elementknoten völlig, dasselbe gilt für Kommentarknoten. Sie tauchen nicht im childNode-Array auf.
Beispiel ansehen …
    <ul id="ersteListe"><li>erster Punkt</li><li>zweiter Punkt</li></ul>
    <script>
      var Anzahl = document.getElementById("ersteListe").childNodes.length;
      document.write("<p>Erste Liste: Anzahl Kindknoten: <b>" + Anzahl + "<\/b><\/p>");
    </script>
    <ul id="zweiteListe">
      <li>erster Punkt</li> 
      <li>zweiter Punkt</li>
    </ul>
    <script>
      var Anzahl = document.getElementById("zweiteListe").childNodes.length;
      document.write("<p>Zweite Liste: Anzahl Kindknoten: <b>" + Anzahl + "<\/b><\/p>");
    </script>

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.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML