CSS, HTML und Javascript mit {stil}

parentElement, children, firstElementChild

nextElementSibling, previousElementSibling, firstElementChild, lastElementChild sind sicherer

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. 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.

  • 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.

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

Javascript elem.children holt nur Elementknoten – Leerzeichen, Text und Kommentare gelangen nicht in die NodeList wie mit childNodes.

Bild 1
Blaues Shirt
Bild 2
Grünes Shirt
Bild 3
Rotes Shirt
<div class="bss-slides">
    <!-- Slideshow -->
    <figure>
        <img src="shirt3.png" width="100%" alt="Bild 1" />
        <figcaption>Blaues Shirt</figcaption>
    </figure>
    …
</div>
…
<script>
var items = document.querySelector('.bss-slides').children;
var t = '';
for (var i=0; i< items.length; i++) {
    t += 'Node Type ' + items[i].nodeType + ' Node Name ' + items[i].nodeName + '<br>';
}
document.querySelector('#res').innerHTML = t;
</script>

Anders als die ältere Methode childNodes gibt children nur Elementknoten vom Typ 1 zurück.

Browser-Support

Die neuen Methoden

  • children,
  • firstElementChild,
  • lastElementChild,
  • nextElementSibling,
  • previousElementSibling
  • parentElement

werden von den modernen Browsern (IE ab Version 9) unterstützt. Wer auf eine noch weiter zurückreichende Unterstützung angewiesen ist, kann ein shim einsetzen.

Ein shim ist ein Javascript, das älteren Browsern neue Funktionen beibringt.

function firstElementChild(el) {
    var child = el.firstElementChild;
    if (!child) {
        child = el.firstChild;
        while (child && child.nodeType !== 1)
            child = child.nextSibling;
    }
    return child;
}

function lastElementChild(el) {
    var child = el.lastElementChild;
    if (!child) {
        child = el.lastChild;
        while (child && child.nodeType !== 1)
            child = child.previousSibling;
    }
    return child;
}

shim für firstElementChild / lastElementChild

children elements