TreeWalker.parentNode() — Methode · JavaScript-Referenz

Signatur

TreeWalker.prototype.parentNode()

Beschreibung

parentNode() geht vom aktuellen Knoten (treeWalker.currentNode) im DOM-Baum nach oben. Die Methode sucht den nächsten Vorfahren, der für den TreeWalker sichtbar ist. Sichtbar ist ein Knoten, wenn er zur Bitmaske whatToShow passt und der optionale filter für ihn NodeFilter.FILTER_ACCEPT zurückgibt. Findet sie einen solchen Knoten, wird er zum neuen currentNode und ist zugleich der Rückgabewert.

Die Suche endet am Wurzelknoten (treeWalker.root). Ist der aktuelle Knoten schon die Wurzel oder gibt es darunter keinen sichtbaren Vorfahren, liefert die Methode null. Der currentNode bleibt dann unverändert. So lässt sich parentNode() gut in einer while-Schleife nutzen, ohne dass der Walker „verloren geht“.

Anders als die DOM-Eigenschaft Node.parentNode überspringt die Methode gefilterte Ebenen. Beim Aufstieg wirken FILTER_SKIP und FILTER_REJECT gleich: Beide Werte überspringen nur den Vorfahren selbst, die Suche geht darüber weiter. Das ist praktisch, wenn Sie z. B. vom Textknoten eines Treffers zum nächsten umgebenden Element eines bestimmten Typs wollen (etwa <section> oder ein Element mit data-*-Attribut).

Rückgabewert

Typ

Node | null

Beschreibung

Der gefundene sichtbare Vorfahr, der jetzt auch currentNode ist. null, wenn es keinen sichtbaren Vorfahren innerhalb von root gibt oder der aktuelle Knoten die Wurzel ist.

Beispiele

Einfacher Aufstieg zum Elternelement

document.body.innerHTML = `
  <main id="app">
    <article>
      <p id="absatz">Hallo</p>
    </article>
  </main>`;

const root = document.getElementById('app');
const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);

// Walker auf den Absatz setzen
walker.currentNode = document.getElementById('absatz');

console.log(walker.parentNode()?.tagName); // ARTICLE
console.log(walker.parentNode()?.tagName); // MAIN (= root)
console.log(walker.parentNode());          // null – root erreicht
console.log(walker.currentNode.id);        // bleibt 'app'

ARTICLE MAIN null app

Nächste umgebende Sektion mit Filter finden

document.body.innerHTML = `
  <div id="doku">
    <section data-kapitel="1">
      <div class="wrapper">
        <ul><li><span id="treffer">Suchbegriff</span></li></ul>
      </div>
    </section>
  </div>`;

const walker = document.createTreeWalker(
  document.getElementById('doku'),
  NodeFilter.SHOW_ELEMENT,
  {
    // Nur <section> ist sichtbar, alle anderen Ebenen werden übersprungen
    acceptNode: (node) =>
      node.tagName === 'SECTION'
        ? NodeFilter.FILTER_ACCEPT
        : NodeFilter.FILTER_SKIP,
  }
);

walker.currentNode = document.getElementById('treffer');
const sektion = walker.parentNode();

console.log(sektion?.dataset.kapitel);

1

Breadcrumb-Pfad vom Textknoten bis zur Wurzel

document.body.innerHTML = `
  <nav id="menue">
    <ul><li>Produkte
      <ul><li id="ziel">Laptops</li></ul>
    </li></ul>
  </nav>`;

const walker = document.createTreeWalker(
  document.getElementById('menue'),
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: (n) => n.tagName === 'LI' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP }
);

// Start beim Textknoten innerhalb von #ziel
walker.currentNode = document.getElementById('ziel').firstChild;

const pfad = [];
let knoten;
while ((knoten = walker.parentNode()) !== null) {
  pfad.unshift(knoten.firstChild.textContent.trim());
}

console.log(pfad.join(' › '));

Produkte › Laptops

// Wichtig · Fallstricke

Methode statt Eigenschaft: walker.parentNode ohne Klammern liefert nur die Funktion, nicht den Knoten. Verwechseln Sie die Methode nicht mit Node.parentNode. Diese DOM-Eigenschaft ignoriert Filter und kann nichts verschieben.
Grenze root: Die Methode geht nicht über root hinaus. Die Wurzel selbst wird nur zurückgegeben, wenn sie den Filter besteht. Weisen Sie currentNode von Hand einen Knoten außerhalb von root zu, findet die Suche die Wurzel nie und kann bis zum Dokument aufsteigen. Vermeiden Sie das.
Kein Treffer = keine Bewegung: Bei null bleibt currentNode unverändert. Prüfen Sie den Rückgabewert, statt einfach currentNode zu lesen.
Der Startknoten wird nicht gefiltert: Der Startknoten (currentNode) darf selbst gefiltert sein. Geprüft werden nur die Vorfahren.
Filter-Fehler: Wirft acceptNode eine Ausnahme, gibt parentNode() sie weiter. Ruft der Filter den Walker erneut auf, löst das einen InvalidStateError aus.
Kompatibilität: Die Methode wird von allen modernen Browsern unterstützt, auch von alten IE-Versionen ab IE 9. In Node.js steht sie nur mit einer DOM-Implementierung wie jsdom zur Verfügung. Für einfache Fälle ist Element.closest() oft kürzer und schneller.

Siehe auch

TreeWalker Document.createTreeWalker() TreeWalker.currentNode TreeWalker.firstChild() TreeWalker.nextNode() Node.parentNode Element.closest()