DOM
Travesía
Buscar..
Árbol caminando
TreeWalker es una interfaz similar a un generador que hace que el filtrado recursivo de nodos en un árbol DOM sea fácil y eficiente.
El siguiente código concatena el valor de todos los nodos de Text en la página e imprime el resultado.
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 función .createTreeWalker tiene una firma de
createTreeWalker(root, whatToShow, filter, entityReferenceExpansion)
| Parámetro | Detalles |
|---|---|
| raíz | El nodo 'raíz' cuyo subárbol debe ser recorrido |
| que hacer | Opcional, sin signo largo que designa qué tipos de nodos mostrar. Ver NodeFilter para más información. |
| filtrar | Opcional, un objeto con un método acceptNode para determinar si un nodo, después de pasar la comprobación de whatToShow debe considerarse |
| entityReferenceExpansion | Obsoleto y opcional, es una bandera booleana que indica si al descartar una EntityReference todo su subárbol debe descartarse al mismo tiempo. |
Iterando sobre nodos
La interfaz NodeIterator proporciona métodos para iterar sobre nodos en un árbol DOM.
Dado un documento como este:
<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>
Uno podría imaginar un iterador para obtener los elementos <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);
}
Ejemplo adaptado del ejemplo proporcionado por los Colaboradores de Mozilla de la document.createNodeIterator() en la Red de Desarrolladores de Mozilla, con licencia CC-by-SA 2.5 .
Esto registrará algo como:
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
Tenga en cuenta que esto es similar a la interfaz de árbol de TreeWalker, pero proporciona solo las nextNode() y previousNode() .