TreeWalker.nextSibling() — Methode · JavaScript-Referenz

Signatur

TreeWalker.prototype.nextSibling()

Beschreibung

nextSibling() springt vom aktuellen Knoten eines TreeWalker zum nächsten Geschwisterknoten. „Sichtbar“ ist ein Knoten dann, wenn er zur Bitmaske whatToShow passt und der optionale filter für ihn NodeFilter.FILTER_ACCEPT liefert. Gibt es so einen Knoten, wird er zum neuen currentNode und zurückgegeben. Andernfalls liefert die Methode null, und currentNode bleibt, wie er war.

Anders als die DOM-Eigenschaft Node.nextSibling beachtet die Methode den Filter. Mit NodeFilter.SHOW_ELEMENT überspringt sie zum Beispiel Text- und Kommentarknoten wie Leerzeichen und Zeilenumbrüche. Filtert der Filter einen Geschwisterknoten mit FILTER_SKIP heraus, sucht der TreeWalker in dessen Kindern weiter. Diese Kinder gelten dann als „logische“ Geschwister. Bei FILTER_REJECT wird der ganze Teilbaum übersprungen.

Die Methode bleibt auf derselben logischen Ebene. Sie wechselt also nie zu einem Kind eines akzeptierten Knotens und verlässt nie den Wurzelknoten (root). Nimm sie, wenn du Knoten derselben Ebene durchgehen willst, etwa Listeneinträge, Tabellenzeilen oder Abschnitte. Für einen Durchlauf durch den ganzen Baum in Dokumentreihenfolge ist nextNode() die richtige Wahl.

Rückgabewert

Typ

Node | null

Beschreibung

Das nächste sichtbare Geschwister, das jetzt auch currentNode ist. Gibt es keins, null; currentNode bleibt dann unverändert.

Beispiele

Geschwister-Elemente ohne Leerzeichen-Textknoten durchlaufen

document.body.innerHTML = `
  <ul id="menu">
    <li>Start</li>
    <li>Produkte</li>
    <li>Kontakt</li>
  </ul>`;

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

// Zum ersten <li> wechseln
let node = walker.firstChild();
while (node) {
  console.log(node.textContent);
  node = walker.nextSibling();
}

Start Produkte Kontakt

Rückgabewert null lässt currentNode unverändert

document.body.innerHTML = '<div id="box"><p>A</p><p>B</p></div>';

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

walker.lastChild();                     // <p>B</p>
const result = walker.nextSibling();    // kein weiteres Geschwister

console.log(result);                    // null
console.log(walker.currentNode.textContent); // bleibt bei "B"

null B

Mit eigenem Filter: ausgeblendete Einträge überspringen

document.body.innerHTML = `
  <ol id="tasks">
    <li>Einkaufen</li>
    <li hidden>Archiviert</li>
    <li>Putzen</li>
  </ol>`;

const walker = document.createTreeWalker(
  document.getElementById('tasks'),
  NodeFilter.SHOW_ELEMENT,
  {
    acceptNode: (el) =>
      el.hidden ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT
  }
);

const sichtbar = [];
for (let n = walker.firstChild(); n; n = walker.nextSibling()) {
  sichtbar.push(n.textContent);
}
console.log(sichtbar);

["Einkaufen", "Putzen"]

// Wichtig · Fallstricke

Nicht verwechseln: TreeWalker.nextSibling() ist eine Methode, beachtet den Filter und verschiebt currentNode. Node.nextSibling ist dagegen eine Eigenschaft, die ungefiltert auch Text- und Kommentarknoten liefert.
Ist currentNode gleich root, gibt die Methode immer null zurück, weil sie den Wurzelknoten nie verlässt. Wechsle deshalb zuerst mit firstChild() auf eine tiefere Ebene.
FILTER_SKIP und FILTER_REJECT verhalten sich verschieden: Bei SKIP können Kinder des übersprungenen Knotens als Geschwister zurückkommen, bei REJECT nicht.
Wirft der Filter in acceptNode eine Ausnahme, gibt nextSibling() sie weiter.
Die Methode gibt es seit Langem in allen modernen Browsern, auch in älteren wie IE9+. Für Umgebungen ohne DOM (Node.js) brauchst du eine Bibliothek wie jsdom.

Siehe auch

TreeWalker.nextNode() TreeWalker.previousSibling() TreeWalker.firstChild() TreeWalker.lastChild() TreeWalker.parentNode()