nextElementSibling, previousElementSibling: direkte Nachbar-Elemente

nextSibling, previousSibling

previousElementSibling und nextElementSilbling greifen auf benachbarte Elemente desselben Elternknotens zu, die nicht direkt durch eine CSS-Klasse oder -id, also über Methoden wie getElementById, getElementsByName oder querySelector erreicht werden.

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

nextElementSibling – das Element dahinter

Sie ersetzen der alten Eigenschaften nextSibling und previousSibling, die nicht nur Element-Knoten, sondern auch Leerzeichen, Kommentare und Zeilenumbrüche als Nachbarn anerkennen.

Auf benachbarte Elemente greift das Script meist über CSS-Selektoren wie querySelector oder getElementById zu. Das ist komfortabel und sicher – auch wenn sich das HTML-Markup ändert. Aber wenn CSS-Klassen und IDs für die Zuordnung nicht verfügbar sind?

Oder (Ziege und Fell)
Elbe (Ähren und Früchte)
Rhein (Fischernetz und Weintrauben)
<figure>
	<img src="figur1.jpg" width="360" height="360" alt="Oder (Ziege und Fell)">
	<figcaption></figcaption>
</figure>

Den Text für das figcaption-Element aus dem alt-Attribut des vorangehenden img-Elements lesen und einsetzen.

function createFigcaption ( item ) {		
	if (item.nextElementSibling && item.nextElementSibling.nodeName === "FIGCAPTION") {
		item.nextElementSibling.innerHTML =  item.getAttribute("alt");
	} 
}
const flüße = document.querySelectorAll (".neptun img");
flüße.forEach ((item) => createFigcaption( item ));

Wenn kein Nachfolger bzw. Vorgänger auf derselben Ebene existiert, geben previousElementSibling und nextElementSibling null zurück.

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

ol ist eine geordnete Liste in einem ol-Element, das weder über eine CSS-Klasse noch eine ID erreicht wird.

<ol>
	<li>Bunte Kleider</li>
	<li>Lässige  Kleider</li>
	<li>Elegante Kleider</li>
	<li>Strandkleider</li>
</ol>
<button id="btnTurn">Reihenfolge umkehren</button>
const turn = document.getElementById("btnTurn");

turn.addEventListener ("click", function () {
	let lastChild = this.previousElementSibling.lastElementChild;
	const result = document.createElement("DIV");

	while (lastChild) {
		result.innerHTML += lastChild.outerHTML;
		lastChild = lastChild.previousElementSibling;
	}
	turn.previousElementSibling.innerHTML = result.innerHTML;
});

previousSibling und nextSilbling: alte DOM-Eigenschaften

previousSibling und nextSilbling waren die Vorläufer für previousElementSibling und nextElementSibling aus der Frühzeit des DOM. Diese älteren Eigenschaften interpretierten auch das Füllmaterial (Kommentare, Zeilenumbrüche und Leerzeichen) im HTML-Markup als Kind- oder Nachbarknoten.

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
Helmholtz-Statue 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, und am Ende prüfen, ob es das gesuchte figcaption-Element überhaupt gibt.

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));
}

Der Einsatz von previousSibling und nextSilbling lohnt nur, wenn tatsächlich auch leere Knoten aus dem HTML-Markup eine Rolle spielen.