DOM
Traversal
Ricerca…
Camminare dell'albero
TreeWalker è un'interfaccia generica che rende i nodi ricorsivi di filtraggio in un albero DOM facile ed efficiente.
Il seguente codice concatena il valore di tutti i nodi di Text nella pagina e stampa il risultato.
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
La funzione .createTreeWalker ha una firma di
createTreeWalker(root, whatToShow, filter, entityReferenceExpansion)
| Parametro | Dettagli |
|---|---|
| radice | Il nodo 'root' che fa parte della sottostruttura deve essere traversato |
| whatToShow | Opzionale, senza firma, che indica quali tipi di nodi mostrare. Vedi NodeFilter per maggiori informazioni. |
| filtro | Facoltativo, un oggetto con un metodo acceptNode per determinare se un nodo, dopo aver superato il controllo whatToShow, deve essere considerato |
| entityReferenceExpansion | Obsoleto e facoltativo, è un flag booleano che indica se quando si elimina un EntityReference l'intero sotto-albero deve essere scartato allo stesso tempo. |
Iterando sui nodi
L'interfaccia NodeIterator fornisce metodi per iterare su nodi in un albero DOM.
Dato un documento come questo:
<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>
Si potrebbe immaginare un iteratore per ottenere gli elementi <li> :
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);
}
Esempio adattato dall'esempio fornito da Mozilla Contributors dalla document.createNodeIterator() sulla Mozilla Developer Network, concessa in licenza in base a CC-by-SA 2.5 .
Questo registrerà qualcosa come:
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
Si noti che questo è simile alla iterface di TreeWalker , ma fornisce solo la funzionalità nextNode() e previousNode() .