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.

18-12-15 SITEMAP

parentElement – wo CSS nicht hinkommt

CSS ist abwärts gerichtet und die 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.

Die Javascript-Eigenschaften parentNode und parentElement liefern den Elternknoten. Dabei ist – ähnlich wie bei nextElementSibling und previousElementSibling die Eigenschaft mit dem Element im Namen jüngeren Datums, parentNode die ältere Version.

parentElement vs parentNode

Nun liefert parentNode zwar keine Leerzeichen, Zeilenbrüche u.ä., sondern immer ein Element, so dass der Unterschied zwischen parentNode und parentElement gering ausfällt.

document.body.parentNode;      // Gibt das  <html> Element zurück
document.body.parentElement;   // Gibt das  <html> Element zurück

Sieht zunächst gleich aus, aber parentElement gibt null zurück, wenn der Eltern-Knoten kein Element-Knoten ist. Gibts das überhaupt?

document.documentElement.parentNode;     // Gibt den Document-Knoten zurück
document.documentElement.parentElement;  // Gibt null zurück, denn <html> hat keinen Eltern-Knoten.
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.

// Findet den ersten Vorfahren mit einem bestimmten Tag-Namen
// oder gibt undefined zurück
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }

  // parentNode gibt undefined zurück, während viele DOM-Methoden null zurückgeben. 
  // Darum hier null als Rückgabewert einsetzen
  return null;
}

parentElement anstelle von parentNode würde direkt null zurückgeben.

In den immergrünen Browsern geht das deutlich einfacher, selbst ab IOS9 und Android 76 – mit elem.closest (selector). Das fehlt noch in IE11, wo noch in der Schleife nach dem Vorfahren gesucht werden muss.

childnodes nextSibling