TreeWalker.previousNode() — Methode · JavaScript-Referenz

Signatur

TreeWalker.prototype.previousNode()

Beschreibung

previousNode() läuft vom aktuellen Knoten (treeWalker.currentNode) aus rückwärts in Dokumentreihenfolge durch den Teilbaum des TreeWalkers. Rückwärts heißt hier: Zuerst wird der tiefste letzte Nachfahre des vorherigen Geschwisterknotens besucht, danach der Geschwisterknoten selbst und schließlich der Elternknoten. Das entspricht genau der Umkehrung von nextNode().

Als sichtbar gilt ein Knoten, wenn er zu whatToShow passt (z. B. NodeFilter.SHOW_ELEMENT) und der optionale Filter NodeFilter.FILTER_ACCEPT zurückgibt. Liefert der Filter FILTER_REJECT, wird der Knoten samt seinem Teilbaum übersprungen; bei FILTER_SKIP fällt nur der Knoten selbst weg, seine Kinder werden weiterhin geprüft.

Wird ein passender Knoten gefunden, setzt die Methode currentNode auf ihn und gibt ihn zurück. Gibt es keinen, liefert sie null und currentNode bleibt unverändert. Die Suche hört am Wurzelknoten (root) auf. Die Wurzel selbst wird zurückgegeben, wenn sie sichtbar ist.

Typische Einsatzfälle sind Tastaturnavigation (z. B. „vorheriges fokussierbares Element“), Rückwärtssuche in Textknoten oder das Durchlaufen eines Baums vom Ende her, etwa nach lastChild().

Rückgabewert

Typ

Node | null

Beschreibung

Den vorhergehenden sichtbaren Knoten, der zugleich neuer currentNode wird, oder null, wenn innerhalb von root kein solcher Knoten existiert.

Beispiele

Einfacher Rückwärtslauf über Elemente

document.body.innerHTML = `
  <ul id="liste">
    <li>Eins</li>
    <li>Zwei</li>
    <li>Drei</li>
  </ul>`;

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

// Beim letzten <li> anfangen
walker.currentNode = liste.lastElementChild;
console.log(walker.currentNode.textContent);

let node;
while ((node = walker.previousNode())) {
  console.log(node.nodeName, node.textContent.trim().split(/\s+/)[0]);
}

Drei LI Zwei LI Eins UL Eins

Ganzen Teilbaum vom Ende her durchlaufen

document.body.innerHTML = `
  <article id="a">
    <h2>Titel</h2>
    <section><p>Absatz A</p><p>Absatz B</p></section>
  </article>`;

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

// Zum tiefsten letzten Nachfahren springen
while (walker.lastChild()) {}

const reihenfolge = [walker.currentNode.nodeName];
let n;
while ((n = walker.previousNode())) reihenfolge.push(n.nodeName);
console.log(reihenfolge.join(' ← '));

P ← P ← SECTION ← H2 ← ARTICLE

Vorheriges fokussierbares Element per Filter finden

document.body.innerHTML = `
  <form id="f">
    <input name="a">
    <button type="button" disabled>Aus</button>
    <div><input name="b"></div>
    <input name="c">
  </form>`;

const form = document.getElementById('f');
const fokussierbar = (el) =>
  el.matches('input, button, select, textarea, a[href]') && !el.disabled
    ? NodeFilter.FILTER_ACCEPT
    : NodeFilter.FILTER_SKIP; // SKIP: Kinder weiter prüfen

const vorherigesFeld = (el) => {
  const walker = document.createTreeWalker(form, NodeFilter.SHOW_ELEMENT, fokussierbar);
  walker.currentNode = el;
  return walker.previousNode();
};

const c = form.querySelector('[name=c]');
const b = vorherigesFeld(c);
console.log(b.name);
console.log(vorherigesFeld(b).name); // deaktivierter Button wird übersprungen

b a

// Wichtig · Fallstricke

Rückgabe null ändert nichts: Wird kein Knoten gefunden, bleibt currentNode dort, wo er war. Für Schleifen der Form while ((n = walker.previousNode())) ist das unkritisch, beim Zurücksetzen der Position muss man es aber beachten.
Die Wurzel wird mit ausgegeben: Ist root sichtbar, liefert previousNode() ihn als letzten Knoten. Wer nur Nachfahren möchte, muss n !== walker.root prüfen.
FILTER_REJECT oder FILTER_SKIP: REJECT blendet den ganzen Teilbaum aus, SKIP nur den Knoten selbst. Verwechselt man die beiden, fehlen oft verschachtelte Elemente.
Leerraum-Textknoten: Mit NodeFilter.SHOW_ALL oder SHOW_TEXT tauchen auch reine Leerzeichen- und Zeilenumbruch-Knoten auf. Diese sollte man gegebenenfalls im Filter aussortieren.
Veränderungen am DOM: Der TreeWalker ist live. Entfernt man currentNode während des Durchlaufs aus dem Dokument, kann die weitere Navigation unerwartete Ergebnisse liefern. Deshalb vor dem Entfernen zuerst weiterwandern.
Kompatibilität: Wird von allen modernen Browsern unterstützt, auch von alten IE-Versionen ab 9. In Node.js steht die Methode nur mit einer DOM-Implementierung wie jsdom zur Verfügung.

Siehe auch

TreeWalker TreeWalker.nextNode() TreeWalker.previousSibling() TreeWalker.lastChild() TreeWalker.currentNode Document.createTreeWalker() NodeIterator.previousNode()