Präzise Methoden für das DOM
childNodes, firstChild sind veraltete Methoden und liefern auch Text Nodes, Kommentare, Leerzeichen und Zeilenumbrüche zurück.
Die jüngeren Methoden wie closest(), parentElement, previousElementSibling und nextElementSibling geben nur Element Nodes zurück werden von den modernen Browsern solide unterstützt.
Alt und neu
childNodes
Alle Nodes, die direkte Kinder eines Elements sind.
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
firstElementChild
Das erste Child-Element mit nodeType 1. Text und Kommentare sind keine Element-Nodes.
lastChild
Das letzte Element der childNodes
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.
parentNode
Elternknoten des aktuellen Node.
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.
children
Javascript children gibt nur Elementknoten vom Typ 1 zurück. Leerzeichen, Text und Kommentare gelangen nicht in die NodeList wie mit der älteren Version childNodes.
HTML
<div class="bss-slides">
<!-- Slideshow -->
<figure>
<img src="shirt3.png" width="100%" alt="Bild 1" />
<figcaption>Blaues Shirt</figcaption>
</figure>
…
</div>
Nodelist mit for durchlaufen
<script> const items = document.querySelector('.bss-slides').children; let text = ''; for (let i=0; i< items.length; i++) { text += 'Node Type ' + items[i].nodeType + ' Node Name ' + items[i].nodeName + '<br>'; } document.querySelector('#res').innerHTML = text; </script>
NodeList mit foreach
Mit ECMAScript 2015 könnten wir mit forEach auch auf die Elemente einer NodeList zugreifen und die Abfrage nach der Zahl der Elemente sparen. forEach für NodeLists wird von IE11 und älteren Versionen von Internet Explorer noch nicht unterstützt. Erst Microsoft Edge hat ECMAScript 2015 mit forEach für NodeLists an Bord.
const elems = document.getElementById('slides').childNodes; elems.forEach (function (item, index) { console.log( index + " nodeType " + item.nodeType + " nodeName " + item.nodeName ); });
Polyfill für IE11 Quelle: bob-lee / polyfill-ie11-nodelist-foreach.js
nextElementSibling / previousElementSibling
previousElementSibling gibt das vorangehende Element auf derselben Ebene eines Elements zurück, ignoriert dabei – anders als previousSibling – Text, Leerzeichen, Zeilenumbrüche und Kommentare.
nextElementSibling gibt das folgende Element auf derselben Ebene eines Elements zurück, ignoriert dabei – anders als nextSibling – Text, Leerzeichen, Zeilenumbrüche und Kommentare.
const fruit = document.getElementById("fruit").children; console.log ("vor der Melone " + fruit[1].previousElementSibling.alt); console.log ("nach der Melone " + fruit[1].nextElementSibling.alt);
[Log] vor der Melone Erdbeere [Log] nach der Melone Orange