Node.parentElement — Eigenschaft · JavaScript-Referenz

Signatur

Node.parentElement

Beschreibung

Die Eigenschaft parentElement gibt das direkte Elternelement eines DOM-Knotens zurück. Im Unterschied zu parentNode liefert sie ausschließlich Knoten vom Typ Element. Ist der Elternknoten etwa ein Document, ein DocumentFragment oder ein ShadowRoot, ist das Ergebnis null.

Typische Einsatzfälle sind das Aufwärts-Navigieren im DOM-Baum, z. B. um in einem Klick-Handler den Container eines Buttons zu erreichen, oder um ein Element aus seinem Elternteil zu entfernen. Weil der Rückgabewert immer ein Element ist, stehen Methoden wie classList, closest() oder querySelector() direkt zur Verfügung – ohne zusätzliche Typprüfung.

Wichtig: Für das Wurzelelement <html> (document.documentElement) ist parentElement null, während parentNode das document liefert. Auch frisch erzeugte, noch nicht eingefügte Elemente haben kein Elternelement.

Rückgabewert

Typ

Element | null

Beschreibung

Das übergeordnete Element oder null, wenn kein Elternknoten existiert oder dieser kein Element ist (z. B. Document, DocumentFragment, ShadowRoot).

Beispiele

Elternelement eines Buttons hervorheben

// HTML: <div class="card"><button id="like">Gefällt mir</button></div>
const button = document.getElementById('like');

button.addEventListener('click', () => {
  const card = button.parentElement;
  card?.classList.toggle('is-liked');
  console.log(card?.className);
});

card is-liked

Unterschied zu parentNode am Wurzelelement

const html = document.documentElement;

console.log(html.parentNode === document); // Elternknoten ist das Document
console.log(html.parentElement);           // aber kein Element

const neu = document.createElement('p');
console.log(neu.parentElement);            // noch nicht eingefügt

true null null

Listeneintrag über Löschen-Button entfernen

// HTML: <ul id="todos"><li>Einkaufen <button class="del">×</button></li></ul>
const list = document.getElementById('todos');

list.addEventListener('click', (event) => {
  if (!event.target.matches('button.del')) return;
  const item = event.target.parentElement; // das <li>
  item?.remove();
  console.log(`Verbleibend: ${list.children.length}`);
});

Verbleibend: 0

Alle Vorfahren-Elemente sammeln

const getAncestors = (node) => {
  const result = [];
  let current = node.parentElement;
  while (current) {
    result.push(current.tagName.toLowerCase());
    current = current.parentElement;
  }
  return result;
};

// HTML: <body><main><section><p id="txt">Hallo</p></section></main></body>
console.log(getAncestors(document.getElementById('txt')));

["section", "main", "body", "html"]

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie el.parentElement = other hat keine Wirkung (im Strict Mode wird ein TypeError geworfen). Zum Verschieben appendChild(), append() oder replaceWith() verwenden.
Immer auf null prüfen: Optionale Verkettung (el.parentElement?.…) verhindert Fehler bei losgelösten Knoten oder am Wurzelelement.
Shadow DOM: Für direkte Kinder eines ShadowRoot ist parentElement null; das Host-Element erreicht man über getRootNode().host.
Textknoten: Auch Text- und Comment-Knoten besitzen parentElement, da die Eigenschaft auf Node definiert ist.
Soll nicht nur der direkte Elternknoten, sondern ein bestimmter Vorfahre gefunden werden, ist Element.closest() meist die bessere Wahl.
Kompatibilität: Von allen modernen Browsern unterstützt. Alte Internet-Explorer-Versionen boten die Eigenschaft nur auf Element, nicht auf anderen Knotentypen.

Siehe auch

Node.parentNode Element.closest() Node.childNodes Element.children Node.getRootNode() Element.remove() Attr.ownerElement