children, firstElementChild, lastElementChild

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.

<div class="bss-slides">
    <!-- Slideshow -->
    <figure>
        <img src="shirt3.png" width="100%" alt="Bild 1" />
        <figcaption>Blaues Shirt</figcaption>
    </figure>
    …
</div>

<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