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.

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

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

parentElement – wo CSS nicht hinkommt

CSS hingegen ist 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 (let i=0; i<close.length; i++) {
   close[i].addEventListener ("click", function () {
      this.parentElement.style="display:none"
   })
}

Frisch erzeugte Elemente ohne Eltern

Es gibt tatsächlich Elemente ohne Eltern. Das sind Elemente, die mit createElement erzeugt wurden, aber auch Elemente, die mit removeChild aus dem DOM entfernt wurden, haben kein Eltern-Element.

Ü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 IOS9 und Android 76 – mit elem.closest (selector). Das fehlt noch in IE11: Da müsste noch in einer Schleife nach dem Vorfahren gesucht werden.