DOM
Traversal
Suche…
Baum zu Fuß
TreeWalker ist eine Generator-ähnliche Schnittstelle, die das rekursive Filtern von Knoten in einem DOM-Baum einfach und effizient macht.
Der folgende Code verkettet den Wert aller Text in der Seite und druckt das Ergebnis aus .
let parentNode = document.body;
let treeWalker = document.createTreeWalker(parentNode, NodeFilter.SHOW_TEXT);
let text = "";
while (treeWalker.nextNode())
text += treeWalker.currentNode.nodeValue;
console.log(text); // all text in the page, concatenated
Die .createTreeWalker Funktion hat eine Signatur von
createTreeWalker(root, whatToShow, filter, entityReferenceExpansion)
| Parameter | Einzelheiten |
|---|---|
| Wurzel | Der 'root'-Knoten, dessen Teilstruktur durchlaufen werden soll |
| whatToShow | Optional, ohne Vorzeichen, welche Knotentypen angezeigt werden sollen. Weitere Informationen finden Sie unter NodeFilter. |
| Filter | Optional: Ein Objekt mit einer AcceptNode-Methode, um zu bestimmen, ob ein Knoten nach dem Durchhalten der WhatToShow-Prüfung berücksichtigt werden soll |
| entityReferenceExpansion | Veraltet und optional. Ist ein boolesches Flag, das angibt, ob beim Löschen einer EntityReference der gesamte Unterbaum gleichzeitig gelöscht werden muss. |
Iteration über Knoten
Die NodeIterator- Schnittstelle stellt Methoden zum Durchlaufen von Knoten in einer DOM- Struktur bereit.
Ein Dokument wie dieses gegeben:
<html>
<body>
<section class="main">
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</section>
</body>
</html>
Man könnte sich einen Iterator vorstellen, um die <li> -Elemente zu erhalten:
let root = document.body;
let whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
let filter = (node) => node.nodeName.toLowerCase() === 'li' ?
NodeFilter.FILTER_ACCEPT :
NodeFilter.FILTER_REJECT;
let iterator = document.createNodeIterator(root, whatToShow, filter);
var node;
while (node = iterator.nextNode()) {
console.log(node);
}
Beispiel angepasst an das von den Mozilla Contributors bereitgestellte Beispiel aus der document.createNodeIterator() Dokumentation des Mozilla Developer Network, lizenziert unter CC-by-SA 2.5
Dies wird so etwas protokollieren:
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
Beachten Sie, dass dies dem TreeWalker-Iterface ähnelt, aber nur die Funktionen nextNode() und previousNode() bietet.