DOM TreeWalker-API

Die DOM TreeWalker-API

Mit der TreeWalker-API können Entwickler ein treeWalker-Objekt erstellen, das zum Durchlaufen des DOM-Baums verwendet werden kann. Der treeWalker verfügt über eine Reihe von Methoden, die verwendet werden können, um die aktuelle Position des treeWalker innerhalb des DOM-Baums zu verschieben, sowie um Informationen über den aktuellen Knoten zurückzugeben.

Die TreeWalker-API ist ein leistungsstarkes Tool zum Durchlaufen des DOM-Baums. Damit können Sie sich leicht im Baum bewegen und Informationen über die Knoten erhalten, auf die Sie stoßen. Die API bietet auch eine Reihe von praktischen Methoden für allgemeine Operationen, wie z. B. das Abrufen des nächsten oder vorherigen Geschwisterknotens eines Knotens oder das Abrufen des übergeordneten Knotens.

Beispielverwendungen der TreeWalker-API

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) {
      return node.tagName === 'DIV' ?
        NodeFilter.FILTER_ACCEPT :
        NodeFilter.FILTER_SKIP;
  }},
  false
);

while(treeWalker.nextNode()) {
  console.log(treeWalker.currentNode.tagName);
}

Der obige Code erstellt einen TreeWalker, der dann verwendet wird, um den DOM-Baum zu durchlaufen. Der TreeWalker akzeptiert nur Knoten, die DIV-Elemente sind, und überspringt daher alle anderen Knotentypen. Beim Durchlaufen des Baums gibt es den Tag-Namen jedes DIV-Knotens aus, auf den es trifft. Dies ist eine nützliche Methode, um alle DIV-Elemente in einem Dokument zu finden.

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) {
      // Check if the node is a DIV, and if it has the "my-class" class.
      return node.tagName === 'DIV' && node.classList.contains('my-class') ?
        NodeFilter.FILTER_ACCEPT :
        NodeFilter.FILTER_SKIP;
  }},
  false
);

while(treeWalker.nextNode()) {
  // Do something with the node, such as add a border.
  treeWalker.currentNode.style.border = '1px solid black';
}

Der obige Code macht dasselbe wie das vorherige Beispiel, akzeptiert aber nur DIV-Knoten, die die Klasse „my-class“ haben. Sobald es auf einen solchen Knoten trifft, fügt es ihm einen schwarzen Rand von 1 Pixel hinzu. Dies ist nur ein einfaches Beispiel dafür, was Sie mit der TreeWalker-API tun können.

(Fast) alles grün

Eine der Herausforderungen bei der Verwendung der TreeWalker-API besteht darin, dass man leicht den Überblick über den aktuellen Knoten verlieren kann. Dies liegt daran, dass die API keine Methoden zum Auffinden eines bestimmten Knotens bereitstellt. Stattdessen müssen Sie die Methoden zum Bewegen um den Baum herum verwenden, was schwierig sein kann. Eine weitere Herausforderung besteht darin, dass die API von Browsern nicht sehr gut unterstützt wird, sodass Sie möglicherweise ein Polyfill verwenden müssen.

Zusammenfassung

Die TreeWalker-API ist ein leistungsstarkes Tool zum Durchlaufen des DOM-Baums. Es bietet eine Reihe von Methoden, um sich im Baum zu bewegen und Informationen über den aktuellen Knoten zu erhalten. Die API bietet auch einige bequeme Methoden für allgemeine Operationen. Die Verwendung der API kann jedoch schwierig sein und wird von Browsern nicht gut unterstützt.

Andere interessante APIs im Zusammenhang mit dem Abruf von DOM-Daten sind die folgenden, die ich in Zukunft behandeln könnte.

• Die DOM-Bereichs-API
• Die DOM-NodeIterator-API