Social Media Photo by Stanislav Kondratiev on Unsplash

Deep Tree Walker

Uso

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-walker

Unpkg

import {createDeepTreeWalkerIterator} from 'https://unpkg.com/deep-tree-walker?module'

# createDeepTreeWalkerIterator()

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.

Sintaxis

createTreeWalker(root, [whatToShow[, acceptNodeFilter]]);

Parámentros

• root: Nodo raíz a partir del cual se comienza a explorar
• whatToShow (opcional): Es un valod de tipo unsigned long que se utilizar para especesifivar el típo de nodos que se quiere recorrer (ver especificación). El valor por defecto es NodeFilter.SHOW_ELEMENT
• acceptNodeFilter (opcional): Función que evalua si un nodo es valido; en caso de válido se aplicará la regla de whatToShow para ser evaluado. En caso de ser válido; el nodo será devuelto en la siguiente iteración. Esta función deve devolver una de las constantes:
  • NodeFilter.FILTER_ACCEPT : En caso de ser válido
  • NodeFilter.FILTER_SKIP : En caso de ser inválido

Valor devuelto

Devuelve un nuevo objeto iterador

Ejemplo

<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>

Enlaces de Interes

• TreeWalker
• TreeWalker Polyfill
• Interface NodeFilter