TreeWalker.previousSibling() — Methode · JavaScript-Referenz

Signatur

TreeWalker.prototype.previousSibling()

Beschreibung

Die Methode previousSibling() eines TreeWalker sucht ausgehend von currentNode den nächsten Geschwisterknoten davor, den whatToShow und der optionale filter durchlassen. Wird ein solcher Knoten gefunden, wird currentNode auf ihn gesetzt und er wird zurückgegeben. Andernfalls ist der Rückgabewert null, und currentNode bleibt unverändert.

Anders als die Eigenschaft Node.previousSibling arbeitet die Methode auf dem gefilterten, logischen Baum des TreeWalkers. Mit NodeFilter.SHOW_ELEMENT werden zum Beispiel Textknoten mit Leerraum und Kommentare automatisch übersprungen. Deshalb eignet sich die Methode gut, um Elemente rückwärts auf derselben Ebene zu durchlaufen, etwa für Tastaturnavigation in Listen, Menüs oder Tabellenzeilen.

Wichtig ist, wie der Filter wirkt:

Liefert der Filter für einen Geschwisterknoten NodeFilter.FILTER_SKIP, wird nur dieser Knoten übersprungen. Die Suche geht dann in seine Kinder (beginnend beim letzten Kind), denn logisch rücken diese auf seine Ebene nach.
Bei NodeFilter.FILTER_REJECT wird der ganze Teilbaum übersprungen.
Die Suche geht nie über den root des TreeWalkers hinaus.

Rückgabewert

Typ

Node | null

Beschreibung

Der gefundene vorherige Geschwisterknoten, der dann auch der neue currentNode ist. Gibt es keinen passenden Knoten, ist der Rückgabewert null, und currentNode ändert sich nicht.

Beispiele

Listeneinträge rückwärts durchlaufen

const list = document.createElement('ul');
list.innerHTML = '<li>Eins</li><li>Zwei</li><li>Drei</li>';

const walker = document.createTreeWalker(list, NodeFilter.SHOW_ELEMENT);
// Beim letzten Eintrag anfangen
walker.currentNode = list.lastElementChild;

let node;
while ((node = walker.previousSibling())) {
  console.log(node.textContent);
}

Zwei Eins

Kein Vorgänger: null, currentNode bleibt gleich

const list = document.createElement('ul');
list.innerHTML = '<li>Eins</li><li>Zwei</li>';

const walker = document.createTreeWalker(list, NodeFilter.SHOW_ELEMENT);
walker.currentNode = list.firstElementChild;

console.log(walker.previousSibling());
console.log(walker.currentNode.textContent);

null Eins

Unterschied zu Node.previousSibling (Leerraum-Textknoten)

const box = document.createElement('div');
box.innerHTML = '<p>A</p>\n  <!-- Hinweis -->\n  <p>B</p>';
const b = box.lastElementChild;

// Die DOM-Eigenschaft liefert den Leerraum-Textknoten
console.log(b.previousSibling.nodeName);

// Der TreeWalker mit SHOW_ELEMENT überspringt Text und Kommentar
const walker = document.createTreeWalker(box, NodeFilter.SHOW_ELEMENT);
walker.currentNode = b;
console.log(walker.previousSibling().textContent);

#text A

FILTER_SKIP: Suche geht in übersprungene Knoten hinein

const root = document.createElement('div');
root.innerHTML = '<section><h2>Kapitel 1</h2></section><h2>Kapitel 2</h2>';

// Nur Überschriften annehmen, alle anderen Elemente überspringen (nicht verwerfen)
const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
  acceptNode: (n) => n.tagName === 'H2'
    ? NodeFilter.FILTER_ACCEPT
    : NodeFilter.FILTER_SKIP
});

walker.currentNode = root.lastElementChild; // <h2>Kapitel 2</h2>
// <section> wird übersprungen, ihr letztes Kind ist logisch der Vorgänger
console.log(walker.previousSibling().textContent);

Kapitel 1

// Wichtig · Fallstricke

Nur dieselbe Ebene: previousSibling() geht nicht zum Elternknoten hinauf und nicht in Kinder akzeptierter Knoten hinein. Für eine Rückwärtssuche in Dokumentreihenfolge über alle Ebenen gibt es TreeWalker.previousNode().
Gefilterter Baum: Mit FILTER_SKIP können Knoten „Geschwister“ sein, die im echten DOM auf verschiedenen Ebenen liegen. Mit FILTER_REJECT wird dagegen der ganze Teilbaum ausgeblendet. Diese Wahl beeinflusst das Ergebnis stark.
Bei null nicht weiterrechnen: Da currentNode gleich bleibt, entstehen in Schleifen keine Fehlzustände. Den Rückgabewert trotzdem immer auf null prüfen, bevor man auf Eigenschaften zugreift.
Grenze root: Ist currentNode der root selbst, gibt die Methode immer null zurück.
Filter-Funktion: Der Filter wird bei jedem Schritt aufgerufen. Aufwendige Filter kosten in großen Bäumen Leistung. Wirft der Filter eine Ausnahme, wird sie an den Aufrufer weitergegeben.
Kompatibilität: Wird von allen modernen Browsern und seit Langem auch vom Internet Explorer 9+ unterstützt. In Node.js gibt es die Methode nur über DOM-Umgebungen wie jsdom.

Siehe auch

TreeWalker TreeWalker.nextSibling() TreeWalker.previousNode() TreeWalker.parentNode() TreeWalker.currentNode Document.createTreeWalker() Node.previousSibling