parentElement, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling

Dom durchqueren, traversal: next Element Sibling, previous Element Sibling, first Element Child, last Element Child

children, firstElementChild, lastElementChild, nextElementSibling und previousElementSibling sind neuer und präziser als die alten Versionen childNodes, firstChild, nextSibling usw., denn sie geben nur Elemente mit nodeType 1 zurück, also Elementknoten. Das erspart viele Abfragen und macht den Scriptcode lesbarer.

parentNode, childNodes, firstChild sind altgediente Methoden und liefern auch Text Nodes, Kommentare, Leerzeichen und Zeilenumbrüche zurück.

Die jüngeren Methoden geben nur Element Nodes zurück werden von den modernen Browsern (ab IE9) 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.

Bild 1
Blaues Shirt
Bild 2
Grünes Shirt
Bild 3
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>
var items = document.querySelector('.bss-slides').children;
var text = '';
for (var 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.

Wenn kein Nachfolger bzw. Vorgänger auf derselben Ebene existiert, geben previous Element Sibling und next Element Sibling null zurück.

Erdbeere Melone Orange
var fruit = document.getElementById("fruit").children;
console.log ("vor der Melone " + fruit[1].previousElementSibling.firstElementChild.innerHTML);
console.log ("nach der Melone " + fruit[1].nextElementSibling.firstElementChild.innerHTML);
[Log] vor der Melone Erdbeere
[Log] nach der Melone Orange

parentElement

querySelectorAll, getElementsByTagName und getElementsByClassName geben NodeLists (auch Collections oder Sammlungen) zurück – das sind keine Arrays. Für die Bestimmung des Index in einer NodeList wird parentNode oder parentElement gebraucht:

  • Ananas
  • Erdbeere
  • Melone
<ul class="fruity">
  <li>Ananas</li>
  <li>Erdbeere</li>
  <li>Melone</li>
</ul>
// Index in einer Nodelist mit parentNode oder parentElement finden
var images = ["fruity-01.svg","fruity-02.svg","fruity-03.svg",];

var fruity = document.querySelectorAll(".fruity li");

for (var i=0; i<fruity.length; i++) {
  fruity[i].addEventListener ('click', function () {
    var img = document.createElement("IMG");
    var index = Array.prototype.indexOf.call(this.parentElement.children, this);
    img.setAttribute("src",images[index]);
    document.querySelector(".demonodes").appendChild(img);
  });
}

Anstelle von parentElement hätte parentNode denselben Zweck erfüllt, denn es ist so gut wie ausgeschlossen, dass ein Text, ein Zeilenumbruch oder ein Kommentar ein parentNode ist.

children elements parentElement document.documentElement document.body <DIV> previousElementSibling nextElementSibling firstElementChild lastElementChild children