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



<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.