TreeWalker.currentNode — Eigenschaft · JavaScript-Referenz

Signatur

TreeWalker.currentNode

Beschreibung

currentNode ist die einzige beschreibbare Eigenschaft eines TreeWalker. Sie gibt den Knoten zurück, auf dem der Walker gerade steht. Direkt nach document.createTreeWalker(root, …) ist das der Wurzelknoten root. Methoden wie nextNode(), parentNode() oder firstChild() verschieben die Position und aktualisieren currentNode jedes Mal, wenn sie erfolgreich sind.

Weil sich die Eigenschaft auch setzen lässt, kann man den Walker gezielt an eine beliebige Stelle im Baum springen lassen, etwa zum Element, das gerade den Fokus hat, oder zu einem Treffer einer Suche. Von dort aus geht es dann relativ weiter. Das ist praktisch für Tastaturnavigation, für die Suche nach dem „nächsten fokussierbaren Element“ oder für Texteditoren, die sich von der Cursorposition aus durch Textknoten bewegen.

Wichtig: Beim Setzen wird weder der Filter (whatToShow, filter) geprüft, noch ob der Knoten innerhalb von root liegt. currentNode kann also auf einen Knoten zeigen, den der Walker selbst nie liefern würde. Die folgenden Navigationsaufrufe beachten Filter und Wurzel aber wieder.

Parameter

Name	Typ	Default	Beschreibung
$value (beim Setzen) Pflicht	Node		Der neue Knoten, an dem der Walker weiterlaufen soll. Muss ein echter `Node` sein. `null` oder Nicht-Knoten lösen einen `TypeError` aus.

Rückgabewert

Typ

Node

Beschreibung

Der Knoten, auf dem der Walker gerade steht. Der Wert ist nie null. Anfangs ist es der root-Knoten des Walkers.

Beispiele

Aktuelle Position beim Durchlaufen auslesen

document.body.innerHTML = '<ul><li>Eins</li><li>Zwei</li></ul>';

const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);

console.log(walker.currentNode.nodeName); // Start: root

while (walker.nextNode()) {
  console.log(walker.currentNode.nodeName);
}

BODY UL LI LI

Walker an das fokussierte Element setzen und das nächste fokussierbare finden

const isFocusable = (el) =>
  el.matches('a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])');

const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, {
  acceptNode: (node) => isFocusable(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
});

const focusNext = () => {
  // Direkt an die aktuelle Fokus-Position springen
  walker.currentNode = document.activeElement ?? document.body;
  const next = walker.nextNode();
  next?.focus();
  return next;
};

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowDown') {
    e.preventDefault();
    focusNext();
  }
});

Vorheriges Textstück ab einem bestimmten Knoten suchen

document.body.innerHTML = '<p>Hallo <b>schöne</b> <i id="ziel">Welt</i></p>';

const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
  acceptNode: (n) => n.data.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
});

// Startpunkt ist ein Element, obwohl der Walker nur Textknoten liefert
walker.currentNode = document.getElementById('ziel');
console.log(walker.currentNode.nodeType); // 1 = Element

const prev = walker.previousNode();
console.log(prev.data);

1 schöne

// Wichtig · Fallstricke

Keine Prüfung beim Setzen: Filter und whatToShow werden bei der Zuweisung ignoriert. currentNode kann also auch außerhalb von root liegen. Liegt der Knoten außerhalb, liefern parentNode() & Co. unter Umständen Knoten, die ebenfalls nicht in root liegen. Deshalb vorher mit root.contains(node) prüfen.
null zuzuweisen ist nicht erlaubt und wirft einen TypeError. Das passiert leicht mit document.activeElement oder querySelector(), die null zurückgeben können.
Scheitert eine Navigationsmethode, gibt sie null zurück, und currentNode bleibt, wo es war. Deshalb Rückgabewerte prüfen, statt blind currentNode zu lesen.
Ein TreeWalker ist „live“: Wird currentNode aus dem DOM entfernt, zeigt der Walker weiter auf den losgelösten Knoten. Die Navigation findet dann von dort aus kaum noch etwas. Setze die Position nach größeren DOM-Änderungen neu.
Anders als NodeIterator hat ein TreeWalker keine Referenzposition. Die Eigenschaft wird in allen Browsern unterstützt, auch in alten.

Siehe auch

TreeWalker.root TreeWalker.filter TreeWalker.whatToShow Animation.currentTime Node.parentNode