DOM
traversal
Zoeken…
Boom lopen
TreeWalker is een generatorachtige interface die recursief filteren van knooppunten in een DOM-structuur eenvoudig en efficiënt maakt.
De volgende code aaneengeschakeld de waarde van alle Text knooppunten in de pagina, en het resultaat drukt.
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
De .createTreeWalker functie heeft een handtekening van
createTreeWalker(root, whatToShow, filter, entityReferenceExpansion)
| Parameter | Details |
|---|---|
| wortel | De 'root'-knoop die ondertiteld is, moet worden doorzocht |
| whatToShow | Optionele, niet-ondertekende lange aanduiding van het type knooppunten dat moet worden weergegeven. Zie NodeFilter voor meer informatie. |
| filter | Optioneel, een object met een acceptNode-methode om te bepalen of een knooppunt moet worden overwogen na het passeren van de whatToShow-controle |
| entityReferenceExpansion | Verouderd en optioneel, is een Booleaanse vlag die aangeeft of bij het weggooien van een EntityReference de hele substructuur tegelijkertijd moet worden weggegooid. |
Itereren over knopen
De NodeIterator- interface biedt methoden voor het itereren van knooppunten in een DOM-structuur.
Gegeven een document als dit:
<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>
Je zou je een iterator kunnen voorstellen om de <li> -elementen te krijgen:
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);
}
Voorbeeld aangepast van het voorbeeld van de Mozilla-bijdragers uit de document.createNodeIterator() van document.createNodeIterator() op het Mozilla Developer Network, gelicentieerd onder CC-by-SA 2.5 .
Dit registreert zoiets als:
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
Merk op dat dit vergelijkbaar is met het iterface van TreeWalker, maar alleen de nextNode() en previousNode() biedt.