Javascript parentElement

parentElement – wo CSS nicht hinkommt

(parentNode ist die ältere Variante, aber in den meisten Fällen macht es keinen Unterschied, ob parentNode oder parentElement angewendet wird.)

CSS war lange Zeit abwärts gerichtet. Kontext-Selektoren wie E F, E > F, E + F und E ~ F gelangen weder an Vorgänger auf derselben Ebene noch an Eltern-Elemente. Es sieht so aus, als wäre CSS richtungsgebunden, um vor einem Neuaufbau der Seiten und unendlichen Schleifen zu schützen. Erst der CSS has-Selektor hat hier mehr Flexibilität gebracht.

document.querySelector ("img").parentElement.style = "display:none";
document.querySelector ("img").parentNode.style = "display:none";

Meist spielt es keine Rolle, ob parentNode oder parentElement verwendet wird. Die einzige Ausnahme:

console.log (document.documentElement.parentNode);    // Gibt das Document-Element zurück
console.log (document.documentElement.parentElement); // Gibt null zurück, weil das <html>-Element kein parentElement hat

Statue Berlin — Athena unterrichtet den Jungen – Schlossbrücke Berlin

Statue Berlin Flora Köln — Venus und Amor von Anton Werres im Gewächshaus der Flora Köln

Helmholtz-Statue vor der Humboldt-Universität zu Berlin

<figure>
   <img src="img.jpg" width="480" height="647" alt="…">
   <span>×</span>
   <figcaption> … </figcaption>
</figure>

const close = document.querySelectorAll (".statuen span");
for (const item of close) {
	item.addEventListener ("click", function () {
		this.parentElement.style = "display:none";
	});
}

Übergeordnete Vorfahren suchen

Wird ein spezieller Element-Typ gesucht, der nicht unbedingt der direkte Vorfahre oder Eltern-Element des aktuellen Elements ist, kann eine Funktion im DOM nach oben reisen, bis der gesuchte Vorfahre gefunden wird, oder feststellen, dass es keinen Vorfahren eines bestimmten Typs gibt.

In den immergrünen Browsern geht das deutlich einfacher, selbst ab IOS 9 und Android 76 – mit elem.closest (selector). Das fehlte noch in IE11: Dort musste noch in einer Schleife nach dem Vorfahren gesucht werden.

Frisch erzeugte Elemente ohne Eltern

Es gibt tatsächlich Elemente ohne Eltern. Das sind Elemente, die mit createElement erzeugt, aber noch nicht ins DOM eingefügt wurden. Elemente, die mit removeChild aus dem DOM entfernt wurden, haben ebenfalls kein parentElement.