Javascript nextElementSibling, previousElementSibling

nextSibling, previousSibling

previousSibling und nextSilbling greifen auf benachbarte Elemente desselben Elternknoten zu, die nicht direkt durch Methoden wie getElementById, getElementsByName oder querySelector erreicht werden.

Weil beide Methoden auch Leerzeichen, Zeilenumbrüche und Kommentare zu den nächsten Nachbarn zählen, gibt es die jüngeren Methoden nextElementSibling und previousElementSibling, die nur Elementknoten auflesen.

Mit previousSibling und nextSilbling darf sich niemand auf das HTML verlassen – immer wieder muss das Script mit nodeType und nodeName prüfen, welcher Elementtyp hier tatsächlich vorliegt, denn auch Kommentare, Zeilenumbrüche und Leerzeichen im HTML-Code sind Elemente und werden als Kind- oder Nachbarknoten interpretiert.

Diese Methoden erfordern einen Check der Fundstellen, denn sie erreichen alle Arten von Knoten:

nextSibling und previousSibling sind alte Methoden aus der Frühzeit des DOM. Eben weil sie nicht nur echte Elemente, sondern auch Füllmaterial erreichen, sind sie um die präzisieren Methoden nextElementSibling und previousElementSibling ergänzt worden.

Die alten Methoden lohnen sich nur, wenn tatsächlich auch leere Knoten aus dem HTML-Markup eine Rolle spielen.

nextElementSibling

Mit nextElementSibling bleiben die leeren Elemente außen vor, die Abfrage reduziert sich auf den Element-Namen. Bei einem Klick auf das Bild die Bildunterschrift einspielen:

Oder (Ziege und Fell)
Elbe (Ähren und Früchte)
Rhein (Fischernetz und Weintrauben)
if (elem.nextElementSibling && elem.nodeName === "FIGCAPTION") {
    elem.nextElementSibling.innerHTML =  elem.getAttribute("alt");
}

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

nextElementSibling und previousElementSibling funktionieren heute in allen Browsern, selbst IE11. Für die ganz hartnäckigen Überlebenden der Microsoft-Ära gibt es ein Polyfill:

IE10 Polyfill
if(!("nextElementSibling" in document.documentElement)){
    Object.defineProperty(Element.prototype, "nextElementSibling", {
        get: function(){
            var e = this.nextSibling;
            while(e && 1 !== e.nodeType)
                e = e.nextSibling;
            return e;
        }
    });
}

previousElementSibling

Hier wird Javascript gebraucht, denn CSS ist abwärts gerichtet: CSS erreicht Elemente, die nach einem Referenzelement liegen – z.B. ein p-Element, das direkt auf ein h2 folgt oder Menü-Elemente, die nach einem input-Element sitzen –, aber an die Vorgänger derselben Ebene kommt CSS nicht.

  1. Bunte Kleider
  2. Lässige Kleider
  3. Elegante Kleider
  4. Strandkleider

olist ist einfach eine geordnete Liste in einem ol-Element.

var turn = document.getElementById("turn");

turn.addEventListener ("click", function () {
   var lastChild = document.querySelector(".olist").lastElementChild;
   var result = document.createElement("DIV");

   while (lastChild) {
      result.innerHTML += lastChild.outerHTML;
      lastChild = lastChild.previousElementSibling;
   }
   document.querySelector(".olist").innerHTML = result.innerHTML;
});

nextSibling / previousSilbling

Javascript nextSibling gibt den nächsten Knoten auf derselben Ebene zurück – einen Knoten, der am selben Elternknoten wie node hängt.

Javascript previousSibling gibt den vorangehenden Knoten auf derselben Ebene zurück – einen Knoten, der am selben Elternknoten wie node hängt.

Athena unterrichtet den Jungen – Schlossbrücke Berlin
Berlin
Venus und Amor von Anton Werres im Gewächshaus der Flora Köln Falle!
Kölner Flora
Helmholtz-Statue vor der Humboldt-Universität zu Berlin
<div class="statuen">
   <figure>
      <img src="statue.jpg" width="480" height="647" alt="statue-berlin-480">
      <figcaption>Berlin</figcaption>
   </figure>
   …
</div>

Um bei einem Klick auf ein Bild an den Text im figcaption-Element zu kommen, müsste nextSibling einen Zeilenbruch und ein paar Tabs überbrücken, vielleicht aber auch Leerzeichen anstelle von Tabs, muss checken, ob es das gesuchte Elemente überhaupt gibt.

Also müsste jedes nextSibling untersucht werden, ob es schon ein Node ist und dann auch noch prüfen, ob es tatsächlich ein figcaption ist.

let search = true;
let a = 0;
while (elem.nextSibling && search) {
	if (elem.nextSibling.nodeType === 1 && elem.nextSibling.nodeName === "FIGCAPTION") {
		caption = elem.nextSibling.innerHTML;
		search = false;
	} else {
		elem = elem.nextSibling;
	}
	a = a + 1;
}
if (search === true) {
	console.log ("keine Unterschrift zu Bild a " + (a +1));
}

Auf dem Weg zum gesuchten Nachbar-Element sind nextSibling und previousSibling keine komfortablen Methoden. Die Erneuerung kommt mit nextElementSibling / previousElementSibling.

childnodes nextSibling