Social Media Photo by Stanislav Kondratiev on Unsplash
Esta herramienta se exporta en los formatos CommonJs, IFFIE, ESM. Puedes descargarlo o instalarlo a través de NPM o desde Unpkg.
Npm
npm install --save deep-tree-walkerUnpkg
import {createDeepTreeWalkerIterator} from 'https://unpkg.com/deep-tree-walker?module'Esta función permite recorrer por todos los elementos del DOM, examentamente igual que TreeWalker con el añadido que también accede a los elmenentos del Shadow Tree.
El recorrido de los nodos se realiza siguiendo el esquema de Busqueda en anchura (anchura-primero). Además la ejecución es perezosa; para mejorar el rendimiento; por lo que se expone un iterador para ir recorriendo el DOM según la necesidad.
createDeepTreeWalkerIterator(nodeRoot, [whatToShow[, filter]]);- nodeRoot: Nodo raíz a partir del cual se comienza a explorar
- whatToShow (opcional): Es un valod de tipo
unsigned longque se utilizar para especesifivar el típo de nodos que se quiere recorrer (ver especificación). El valor por defecto es NodeFilter.SHOW_ELEMENT - filter (opcional): Objeto con la interfáz de NodeFilter
Devuelve un nuevo objeto iterador
<div id="box">
<my-component><my-component> <!-- CustomElement con ShadowDom -->
<a href="#">link</a>
</div>
<script type="module">
import {createDeepTreeWalkerIterator} from 'deep-tree-walker-iterator';
let gen;
const root = document.querySelector('#box');
// Uso básico
gen = createDeepTreeWalkerIterator(root);
console.group('Uso básico');
console.log(gen.next().value); // <my-component><my-component>
console.log(gen.next().value); // <a href="#"></a>
console.log(gen.next().value); // undefined
console.groupEnd();
// filtrando por el tipo de nodo
gen = createDeepTreeWalkerIterator(root, NodeFilter.SHOW_COMMENT);
console.group('filtrando por el tipo de nodo');
console.log(gen.next().value); // <!-- CustomElement con ShadowDom -->
console.log(gen.next().value); // undefined
console.groupEnd();
// filtrando usando una función propia
gen = createDeepTreeWalkerIterator(root, NodeFilter.SHOW_ELEMENT, (node) =>
node.tagName === 'A' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP);
console.group('filtrando usando una función propia');
console.log(gen.next().value); // <a href="#"></a>
console.log(gen.next().value); // undefined
console.groupEnd();
</script>