CSS, HTML und Javascript mit {stil}

Javascript parentNode, childNodes, firstChild, nextSibling

JS parent Element, child Nodes, first child

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

Auf das HTML-Markup darf sich niemand verlassen – immer wieder muss eine Prüfung mit Javascript nodeType und nodeName eingestreut werden: Welche Art von Knoten liegt hier nun tatsächlich vor?

Javascript bietet ein ganzes Bündel von Methoden zur Navigation durch das DOM. firstChild, lastChild, childNodes, nextSibling und previousSibling erreichen auch ohne ID und class-Attribut jeden beliebigen Knoten im DOM.

Diese Methoden erfordern einen Check der Fundstellen, denn sie erreichen alle Arten von Knoten:

  • Zeilenumbrüche können als neuer Knoten gelesen werden,
  • ebenso Leerzeichen und
  • HTML-Kommentare.

Navigation im DOM

children, firstElementChild, lastElementChild, nextElementSibling, previousElementSibling und parentElement sind neuere Methoden, die nur Element Nodes zurückgeben.

  • 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.

  • firstChild

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

  • firstElementChild

    Das erste Child-Element mit nodeType 1.

  • lastChild

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

  • lastElementChild

    Das letzte Child-Element mit nodeType 1.

  • nextSibling

    Verweis auf das nächste Kind desselben Elternknotens

  • nextElementSibling

    Verweis auf das nächste Kind-Element desselben Elternknotens.

  • previousSibling

    Verweis auf das vorangehende Kind desselben Elternknotens.

  • previousElementSibling

    Verweis auf das vorangehende Kind-Element desselben Elternknotens.

  • parentNode

    Elternknoten des aktuellen Node.

  • parentElement

    Elternelement des aktuellen Node.

childNodes

Javascript 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.

hasChildNodes

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

<div id="noChilds"></div>

Das Skript prüft mit hasChildNodes, ob der Knoten mit der id noChilds Kinder hat.

if (document.getElementById('noChilds')) {
   if (document.getElementById('noChilds').hasChildNodes === true) {
      document.querySelector('.noChildres').innerHTML = "#noChilds hat childNodes ";
   } else {
      document.querySelector('.noChildres').innerHTML = "#noChilds hat keine childNodes ";
   }
}

firstChild / lastChild

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

Javascript lastChild gibt den letzten Kindknoten von node zurück.


<div id="kong">
    <svg>…</svg>
</div>

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

if (document.getElementById('kong') ) {
   var kong = document.getElementById('kong');
   if (kong.hasChildNodes) {
      document.querySelector('.fcres').innerHTML = 
         'firstChild: ' + kong.firstChild.nodeName + 
         '<br>firstElementChild: ' + kong.firstElementChild.nodeName;
   } else {
      document.querySelector('.fcres').innerHTML = 
      kong.nodeName + " hat keine Kindknoten";
   }
}

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.

if (document.getElementById('thisUl')) {
   var node = document.getElementById('thisUl');
   if (node.hasChildNodes) {
      document.querySelector('.resLast').innerHTML = 
         'Letzer Child Node: ' + node.lastChild.nodeName;
   } else {
      document.querySelector('.resLast').innerHTML = 
         'Letzer Child Node: Hat keine childNode';
   }
} else {
   document.querySelector('.resLast').innerHTML = 
      'Kein Element "thisUl" gefunden';
}

nextSibling / previousSilbling

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

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

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

nextSibling und previousSibling liefern jede Art von Knoten: text nodes, comment nodes, Leerzeichen, Tabularen oder Zeilenumbrüche. Wenn man sicher gehen will, das nur Element-Nodes aufgenommen werden, muss entweder der Typ des gefundenen Knotens überprüft oder nextElementSibling / prevElementSibling verwendet werden.

var node = document.getElementById('list2');
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';
   }

Node Element oder #text?

firstChild, lastChild, nextSibling, previousSibling sind lausige Funktionen – i.d.R. suchen wir nach Element Nodes und wollen Zeilenumbrüche, Tabulatoren und Leerzeichen ignorieren.

Effizienter und zuverlässiger sind firstElementChild, lastElementChild, previousElementSibling, die aber von älteren Browsern (IE erst ab Version 9) noch nicht unterstützt werden.