children, firstElementChild, lastElementChild

Javascript: next Element Sibling, previous Element Sibling, first Element Child, last Element Child

children, firstElementChild, lastElementChild sind präziser als die alten Versionen childNodes, firstChild, nextSibling usw., denn sie geben nur Elemente mit nodeType 1 zurück, also Elementknoten.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

DOM element nodes: children, previousElementSibling, nextElementSibling
DOM Nodes: children, nextElementSibling, previousElementSibling

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.

Blaues Shirt
Blaues Shirt
Grünes Shirt
Grünes Shirt
Orange Shirt
Rotes Shirt
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.

Melone Erdbeere Orange
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