Javascript parentNode, childNodes, firstChild

childNodes, firstChild, lastChild – alte Methoden des DOM

childNodes, firstChild, lastChild, nextSibling, previousSibling und parentNode sind alte Methoden aus der Frühzeit des DOM. Eben weil sie nicht nur echte Elemente, sondern auch Füllmaterial erreichen, sind sie um die präzisieren Methoden children, firstElementChild et.al. ergänzt worden.

Diese alten Methoden sind nicht deprecated, aber die modernen Varianten sind klarer, weniger fehleranfällig (kein Whitespace-Problem) und lesbarer. Die alten Methoden lohnen sich nur, wenn tatsächlich auch leere Knoten aus dem HTML-Markup eine Rolle spielen.

childNodes

Javascript childNodes gibt ein NodeList Object aller Kindknoten von node zurück. Eine NodeList sieht aus wie ein Array, ist aber kein Array, sondern 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>

Ein normaler for-loop läuft durch alle Fundstellen:

let  elems = document.getElementById('slides').childNodes;
let text = '';

for (let i=0; i<elems.length; i++) {
   text += ' NodeName ' +  elems[i].nodeName + '<br>';
}
document.getElementById('status').innerHTML = text;

Das Skript sammelt alle Childnodes des Elements mit der id slides in einer NodeList elems.

NodeList mit foreach

Mit ECMAScript 2015 könnten wir mit forEach auch auf die Elemente einer NodeList zugreifen. foreach erspart die Abfrage nach der Anzahl der Elemente in der NodeList (nicht IE11).

const elems = document.getElementById('slides').childNodes;

elems.forEach (function (item, index) {
   console.log( index + " nodeType " + item.nodeType + " nodeName " + item.nodeName );
});

hasChildNodes

Javascript has Child Nodes 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') ) {
   let 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')) {
   let 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';
}

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 und nexElementSibling, die von älteren Browsern (IE erst ab Version 9) noch nicht unterstützt wurden.