Javascript childNodes, parentNode, firstChild, nextSibling

childNodes, parentNode, firstChild und nextSilbling greifen auf Elemente zu, die nicht direkt durch Funktionen wie getElementById erreicht werden.

Aber auf das HTML-Markup darf sich niemand verlassen – immer wieder muss eine Prüfung mit Javascript nodeType und nodeName eingestreut werden, welcher Knoten hier nun tatsächlich im vorliegt.

Zeilenumbrüche können als neuer Knoten gelesen werden. Beim Auslesen von Klassen immer bedenken, dass ein HTML-Tag mehrere Klassen in einem Klassen-Attribut enthalten kann. Der Weg zum kleinen Knoten unten am Ende des Baums birgt jede Menge morscher Äste.

Die neuen Methoden firstElementChild, lastElementChild, nextElementSibling und previousElementSibling sind präziser als firstChild, lastChild, nextSibling und previous Sibling, denn sie geben nur Elemente mit nodeType 1 zurück. Das erspart viele Abfragen und macht den Scriptcode lesbarer.

  • childNodes

    Alle Nodes, die direkte Kinder eines Elements sind. Zu childNodes zählen auch Text- und Kommentar-Nodes, nicht nur HTML (XML, SVG)-Elemente.

  • children

    Alle Elementknoten, die direkte Kinder eines Elements sind, in der Reihenfolge, wie sie im Code des Dokuments vorkommen. Zu children zählen nur Elementknoten, also weder Text- noch Kommentarknoten.

  • firstChild

    Das erste Element der childNodes,
    auch elem.childNodes[0].

  • firstElementChild

    Das erste Child-Element mit nodeType 1. Text und Kommentare sind keine Element-Nodes.

  • lastChild

    Das letzte Element der childNodes,
    auch elem.childNodes[childNodes.length-1]

  • lastElementChild

    Das letzte Child-Element mit nodeType 1. Text und Kommentare sind keine Element-Nodes.

  • nextSibling

    Verweis auf das nächste Kind desselben Elternknotens

  • nextElementSibling

    Verweis auf das nächste Kind-Element desselben Elternknotens. Zu nextElementSibling zählen nur Elementknoten, nicht aber Text- und Kommentarknoten.

  • previousSibling

    Verweis auf das vorangehende Kind desselben Elternknotens.

  • previousElementSibling

    Verweis auf das vorangehende Kind-Element desselben Elternknotens. Zu previousElementSibling zählen nur Elementknoten, nicht aber Text- und Kommentarknoten.

  • parentElement

    Elternelement des aktuellen Node. parentElement gibt null zurück, wenn der Elternknoten kein Elementknoten ist (document.documentElement.parentElement). In den meisten Fällen gibt es aber kein Unterschied zu parentNode.

  • parentNode

    Elternknoten des aktuellen Node.

childNodes

Jacascript childNodes gibt ein NodeList Object aller Kindknoten von node zurück. Eine NodeList ist eine geordnete Liste von Nodes – die Nodes erscheinen in der Liste nach ihrer Position im Markup.

<div id="slides">
   <!-- Erstes Bild der Slideshow -->
   <figure>
      <img src="slide-01.png" width="807" height="236" alt=" " />
   </figure>
…
   <figure>
      <img src="slide-03.png" width="807" height="236" alt=" " />
   </figure>
</div>
Javascript childNodes Beispiel
Javascript childNodes Beispiel
Javascript childNodes Beispiel
var slides = document.getElementById('slides');
var elems = slides.childNodes;
var text = '';
for (var i=0; i < elems.length; i++) {
	text += elems[i].nodeName + '<br>';
}
document.getElementById('childnodes').innerHTML = text;

Das Skript sammelt alle Kindknoten des Elements mit der id slides in einer NodeList elems. Der Block der for-Anweisung schreibt den nodeName jedes childNode in den String text, der am Ende ausgegeben wird.

Die Analyse mittels for-Loop ist altmodisch, aber eine Umwandlung in ein Array lohnt sich für die Handvoll Nodes wahrlich nicht.

children

children holt nur Elementknoten – Leerzeichen, Text und Kommentare gelangen nicht in die NodeList wie im Beispiel zuvor.

var slides = document.getElementById('slides');
var elems = slides.children;
var text = '';
for (var i=0; i < elems.length; i++) {
   text += 'NodeType ' + elems[i].nodeType + '
'; } document.getElementById('children').innerHTML = text;

parentNode

parentNode parentNode parentNode nextSibling nextSibling prevSibling prevSibling body div p ul

Javascript parentNode gibt den Elternknoten von node zurück.

Sag mal Kleiner, wer sind denn deine Eltern?

<p id="jsdomP">Sag mal Kleiner, wer sind denn deine Eltern?</p>

Das HTML p-Tag wird nach dem Laden des Dokuments anhand seines id-Attributs identifiziert. Der Event Handler onclick aktiviert die Ausgabe, wenn das P-Element mit der Maus angeklickt wird.

var jsdomP = document.getElementById('jsdomP'); 
jsdomP.onclick = function() {
   alert("parentNode ist " + this.parentNode.nodeName + "\n" + 
         "parentNode vom parentNode ist " + 
         this.parentNode.parentNode.nodeName);
   return false;
}

hasChildNodes

Javascript hasChildNodes gibt true zurück, wenn node Kindknoten hat und false, wenn der Knoten node keine Kindknoten hat.

<div id="jsdomHC"></div>

Das Skript prüft mit der Eigenschaft hasChildNodes von node, ob der Knoten mit der id jsdomHC Kinder hat.

var node = document.getElementById('jsdomHC');
if (node.hasChildNodes == true) {
   alert(node.nodeName + " hat Kindknoten");
} else {
   alert(node.nodeName + " hat keine Kinder");
}

firstChild

kong.jpg Javascript firstChild gibt den ersten Kindknoten von node zurück


<img id="jsdomFC" src="kong.jpg" width="152" height="145" alt="kong.jpg" />

Das Skript prüft zuerst, ob ein Element mit der ID jsdomFC existiert und falls das Element existiert, ob das Element Kindknoten hat. Wenn das Element tatsächlich Kindknoten hat, gibt das Skript den Namen des Kindknotens aus.

function showFirstChild()
{
   if (document.getElementById('jsdomFC')) {
      var jsdomFC = document.getElementById('jsdomFC');
      if (jsdomFC.hasChildNodes == true) {
         alert(jsdomFC.firstChild.nodeName);
      } else {
         alert(jsdomFC.nodeName + " hat keine Kindknoten");
      }
   } else {
      alert ("Element existiert nicht");
   }
}

lastChild

Javascript lastChild gibt den letzten Kindknoten von node zurück

  • Montag
  • Dienstag
  • Mittwoch
<ul id="thisUl"><li>Montag</li><li>Dienstag</li><li>Mittwoch</li></ul>

Das Skript prüft, ob der Knoten mit der id thisUl Kindknoten hat (if (node.hasChildNodes))und wenn ja, dann gibt das Skript den Namen des letzten Kindknotens aus: node.lastChild.nodeName. Das letzte LI-Element erwischt das Skript aber nur zuverläßig, weil die Tags des UL-Elements ohne Leerraum in einer Zeile stehen.

function showLast()
{
   if (document.getElementById('thisUl')) {
      var node = document.getElementById('thisUl');
      if (node.hasChildNodes) {
         alert('Letzes Kind ' + node.lastChild.nodeName);
      } else {
         alert(node.nodeName + ' hat keine Kindknoten');
      }
   } else {
      alert ( "Ein Element mit der ID thisUl existiert nicht." ); 
   }
}

nextSibling

Javascript nextSibling gibt den nächsten Knoten auf derselben Ebene zurück – einen Knoten, der am selben Elternknoten wie node hängt.

  • Montag
  • Dienstag
  • Mittwoch
<ul id="thisUl2">
   <li>Montag</li>
   <li>Dienstag</li>
   <li>Mittwoch</li>
</ul>

Das Skript prüft, ob das Element mit der id thisUl2 Kindknoten hat, und wenn ja, setzt die Anweisung node = node.firstChild die Variable node auf das erste Kind des Knotens – am Anfang also auf den ersten Kindknoten des UL-Elements. Solange es einen nextSilbling gibt (while (node.nextSibling)), setzt der Block der while-Schleife die Variable einen Sibling weiter: node = node.nextSibling;.

function showNextSibling()
{
   var node = document.getElementById('thisUl2');
   var text = '';
   if (node.hasChildNodes) {
      node = node.firstChild;    
      while (node.nextSibling) {
         text = text + node.nodeName + ' '; 
         node = node.nextSibling;
      }
   } else {
      text = 'Knoten ' + node.nodeName + ' hat keine Kinder';
   }
   alert(text);
   return false; 
}

previousSibling

Javascript previousSibling gibt den vorangehenden Knoten auf derselben Ebene zurück – einen Knoten, der am selben Elternknoten wie node hängt.