NodeIterator.nextNode() — Methode · JavaScript-Referenz

Signatur

NodeIterator.prototype.nextNode()

Beschreibung

nextNode() ist die zentrale Methode eines NodeIterator, den man mit document.createNodeIterator() erzeugt. Jeder Aufruf liefert den nächsten Knoten in Dokumentreihenfolge (Tiefensuche, Pre-Order), der zu whatToShow passt und vom optionalen Filter akzeptiert wird. Sind keine Knoten mehr übrig, kommt null zurück.

Wichtig: Der erste Aufruf liefert den Wurzelknoten selbst (root), falls er zu Maske und Filter passt. Das liegt daran, dass der Iterator anfangs vor der Wurzel steht. Ein Wechsel zwischen nextNode() und previousNode() liefert beim Richtungswechsel denselben Knoten noch einmal, weil der Iterator eine Position zwischen zwei Knoten hat.

Man verwendet nextNode() typischerweise in einer while-Schleife, um flach über alle Text-, Kommentar- oder Elementknoten eines Teilbaums zu laufen, z. B. zum Suchen und Ersetzen von Text, zum Entfernen von Kommentaren oder zum Sammeln bestimmter Elemente. Anders als bei TreeWalker gibt es keine Navigation zu Eltern oder Geschwistern, dafür bleibt der Iterator auch dann stabil, wenn Knoten während der Iteration entfernt werden.

Rückgabewert

Typ

Node | null

Beschreibung

Den nächsten passenden Knoten oder null, wenn das Ende der Menge erreicht ist.

Beispiele

Alle Textknoten eines Elements sammeln

const root = document.createElement('div');
root.innerHTML = '<p>Hallo <b>Welt</b></p><p>Tschüss</p>';

const it = document.createNodeIterator(root, NodeFilter.SHOW_TEXT);
const texte = [];
let node;
while ((node = it.nextNode()) !== null) {
  texte.push(node.textContent);
}
console.log(texte);

["Hallo ", "Welt", "Tschüss"]

Erster Aufruf liefert die Wurzel

const ul = document.createElement('ul');
ul.innerHTML = '<li>A</li><li>B</li>';

const it = document.createNodeIterator(ul, NodeFilter.SHOW_ELEMENT);
console.log(it.nextNode().tagName); // Wurzel selbst
console.log(it.nextNode().tagName);
console.log(it.nextNode().tagName);
console.log(it.nextNode());

UL LI LI null

HTML-Kommentare mit Filter finden und entfernen

const root = document.createElement('section');
root.innerHTML = '<!-- TODO --><p>Inhalt</p><!-- intern: geheim -->';

const it = document.createNodeIterator(
  root,
  NodeFilter.SHOW_COMMENT,
  (n) => n.data.includes('intern')
    ? NodeFilter.FILTER_ACCEPT
    : NodeFilter.FILTER_SKIP
);

let kommentar;
while ((kommentar = it.nextNode())) {
  kommentar.remove(); // Entfernen während der Iteration ist sicher
}
console.log(root.innerHTML);

<p>Inhalt</p>

// Wichtig · Fallstricke

Wurzel inklusive: Der erste Aufruf gibt root zurück, wenn er zu whatToShow passt. Wer nur Nachfahren will, muss die Wurzel überspringen oder im Filter ausschließen.
Filter: Bei NodeIterator wirken FILTER_REJECT und FILTER_SKIP gleich: Nachfahren werden trotzdem besucht (anders als bei TreeWalker).
Wirft der Filter eine Ausnahme, wird sie weitergereicht. Ruft der Filter selbst rekursiv nextNode() auf, entsteht ein InvalidStateError.
In der Schleife immer explizit auf null prüfen bzw. die Zuweisung klammern: while ((n = it.nextNode())).
In allen modernen Browsern unterstützt. Für einfache Elementauswahl sind querySelectorAll() oft einfacher; NodeIterator lohnt sich vor allem für Text- und Kommentarknoten.

Siehe auch

FileSystemDirectoryHandle.resolve() new StereoPannerNode() NodeIterator.detach() NodeIterator.previousNode() Node.getRootNode()