Node.parentNode — Eigenschaft · JavaScript-Referenz

Signatur

Node.parentNode

Beschreibung

Die schreibgeschützte Eigenschaft parentNode des Node-Interfaces gibt den direkten Elternknoten des aktuellen Knotens zurück. Das kann ein Element, ein Document oder ein DocumentFragment sein. Bei ShadowRoot-Kindern ist das der ShadowRoot selbst, denn er ist ein DocumentFragment.

In diesen Fällen ist der Wert null:

Der Knoten ist ein Document oder ein DocumentFragment. Diese Knoten haben nie einen Elternknoten.
Der Knoten wurde gerade erst erzeugt, zum Beispiel mit document.createElement(), und ist noch nicht in einen Baum eingehängt.
Der Knoten wurde aus dem Baum entfernt, zum Beispiel mit remove() oder removeChild().

Anders als parentNode liefert Node.parentElement nur Element-Knoten. Am deutlichsten sieht man den Unterschied bei document.documentElement (dem <html>-Element): Dort gibt parentNode das document zurück, parentElement aber null.

Typische Einsatzgebiete sind das Hochlaufen im DOM-Baum (Traversierung), das Entfernen oder Ersetzen eines Knotens über seinen Elternknoten (node.parentNode.removeChild(node)) und das Einfügen von Geschwisterknoten mit parentNode.insertBefore().

Rückgabewert

Typ

Node | null

Beschreibung

Der direkte Elternknoten (Element, Document oder DocumentFragment) oder null, wenn der Knoten keinen Elternknoten hat.

Beispiele

Elternknoten auslesen und Knoten entfernen

// HTML: <ul id="liste"><li id="eintrag">Eintrag</li></ul>
const eintrag = document.getElementById('eintrag');
const eltern = eintrag.parentNode;

console.log(eltern.id);

// Klassisches Muster zum Entfernen (funktioniert auch in sehr alten Browsern)
if (eintrag.parentNode) {
  eintrag.parentNode.removeChild(eintrag);
}
console.log(eintrag.parentNode);

liste null

Unterschied zu parentElement und nicht eingehängte Knoten

const html = document.documentElement;
console.log(html.parentNode === document); // Document ist Elternknoten
console.log(html.parentElement);           // kein Element darüber

const neu = document.createElement('div');
console.log(neu.parentNode);               // noch nicht im Baum

const fragment = document.createDocumentFragment();
fragment.append(neu);
console.log(neu.parentNode === fragment);
console.log(fragment.parentNode);

true null null true null

Nach oben laufen bis zu einem passenden Vorfahren

// Findet den nächsten Vorfahren mit einem bestimmten data-Attribut
const findeVorfahr = (node, attr) => {
  let aktuell = node.parentNode;
  while (aktuell && aktuell !== document) {
    if (aktuell.nodeType === Node.ELEMENT_NODE && aktuell.hasAttribute(attr)) {
      return aktuell;
    }
    aktuell = aktuell.parentNode;
  }
  return null;
};

document.addEventListener('click', (event) => {
  const karte = findeVorfahr(event.target, 'data-karte');
  if (karte) console.log('Karte geklickt:', karte.dataset.karte);
});

Karte geklickt: 42

Neuen Knoten nach einem bestehenden einfügen

const referenz = document.querySelector('#absatz');
const hinweis = document.createElement('p');
hinweis.textContent = 'Nachtrag';

// insertBefore mit nextSibling = "insertAfter"
referenz.parentNode.insertBefore(hinweis, referenz.nextSibling);
console.log(hinweis.previousSibling === referenz);

true

// Wichtig · Fallstricke

Auf null prüfen: Bei nicht eingehängten oder entfernten Knoten führt node.parentNode.removeChild(node) zu einem TypeError. Nutze Optional Chaining (node.parentNode?.removeChild(node)) oder gleich das moderne node.remove().
Nicht immer ein Element: Der Rückgabewert kann ein Document, ein DocumentFragment oder ein ShadowRoot sein. Methoden wie closest() oder classList gibt es dort nicht. Wenn du nur Elemente brauchst, nimm parentElement oder closest().
Shadow DOM: Von einem Knoten direkt unter einem ShadowRoot führt parentNode nicht zum Host-Element. Dafür brauchst du shadowRoot.host bzw. getRootNode().host.
Template-Inhalte: Kinder von template.content haben ein DocumentFragment als Elternknoten, nicht das <template>-Element.
Attribut-Knoten (Attr) haben immer parentNode === null. Das zugehörige Element liefert attr.ownerElement.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ignoriert und wirft im Strict Mode einen TypeError. Sie wird von allen Browsern unterstützt.

Siehe auch

Node.parentElement Node.childNodes Node.prototype.removeChild() Node.prototype.insertBefore() Element.prototype.closest() Node.prototype.getRootNode() Element.prototype.remove()