DOM
Traversal
Sök…
Trädet går
TreeWalker är ett generatorliknande gränssnitt som gör rekursivt filtrering av noder i ett DOM-träd enkelt och effektivt.
Följande kod sammanfogar värdet på alla Text i sidan, och skriver resultatet.
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
Funktionen .createTreeWalker har en signatur av
createTreeWalker(root, whatToShow, filter, entityReferenceExpansion)
| Parameter | detaljer |
|---|---|
| rot | Den "rot" -noden som är underträde ska raderas |
| whatToShow | Valfritt, osignerat långt betecknar vilka typer av noder som ska visas. Se NodeFilter för mer information. |
| filtrera | Valfritt, Ett objekt med en acceptNode-metod för att avgöra om en nod, efter att ha passerat whatToShow-kontrollen ska övervägas |
| entityReferenceExpansion | Föråldrad och valfri, är en boolsk flagga som indikerar om hela underträdet måste kasseras samtidigt när man kasserar en EntityReference. |
Iterera över noder
NodeIterator- gränssnittet tillhandahåller metoder för att iterera över noder i ett DOM-träd.
Får ett dokument som det här:
<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 kan föreställa sig en iterator för att få <li> elementen:
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);
}
Exempel anpassat från exemplet tillhandahållet av Mozilla Contributors från document.createNodeIterator() -dokumentationen på Mozilla Developer Network, licenserat under CC-by-SA 2.5 .
Det här loggar något som:
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
Observera att detta liknar TreeWalker- iterface, men ger endast nextNode() och previousNode() .