Javascript parentElement

parentNode und parentElement – Elternknoten eines Elements

parentElement und parentNode finden das Eltern-Element, den übergeordneten Knoten des aktuellen Elements. parentElement ist eine Eigenschaft des Elements und keine Methode, und kann nur gelesen (read only), nicht aber gesetzt werden.

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

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.

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
Humboldt-Universität ×
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.