Cómo filtrar y recorrer el árbol DOM con JavaScript

¿Sabías que hay una API de JavaScript cuya única misión es filtrar e iterar a través de los nodos que queremos desde un árbol DOM? De hecho, no uno, sino que hay dos de tales API: NodeIterator y TreeWalker . Son bastante similares entre sí, con algunas diferencias útiles. Ambos pueden devolver una lista de nodos que están presentes en un nodo raíz determinado al tiempo que cumplen con las reglas de filtro predefinidas y / o personalizadas que se les aplican.

Los filtros predefinidos disponibles en las API nos pueden ayudar a apuntar a diferentes tipos de nodos, como nodos de texto o nodos de elementos, y los filtros personalizados (añadidos por nosotros) pueden filtrar aún más el grupo, por ejemplo, buscando nodos con contenido específico. La lista de nodos devueltos es iterable, es decir, se pueden enlazar y podemos trabajar con todos los nodos individuales de la lista.

Cómo usar la API NodeIterator

Se puede crear un objeto NodeIterator utilizando el método createNodeIterator() de la interfaz del document . Este método toma tres argumentos . El primero es obligatorio; es el nodo raíz que contiene todos los nodos que queremos filtrar.

El segundo y tercer argumentos son opcionales . Son los filtros predefinidos y personalizados, respectivamente. Los filtros predefinidos están disponibles para usar como constantes del objeto NodeFilter .

Por ejemplo, si la constante NodeFilter.SHOW_TEXT se agrega como el segundo parámetro, devolverá un iterador para una lista de todos los nodos de texto debajo del nodo raíz . NodeFilter.SHOW_ELEMENT devolverá solo los nodos de elemento . Vea una lista completa de todas las constantes disponibles .

El tercer argumento (el filtro personalizado) es una función que implementa el filtro .

Aquí hay un fragmento de código de ejemplo :

 título 
 esta es la envoltura de la página 
Hola
¿Cómo estás?
 txt  

Suponiendo que queremos extraer el contenido de todos los nodos de texto que están dentro del div #wrapper, así es como lo hacemos con NodeIterator :

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); while (nodeIterator.nextNode ()) {console.log (nodeIterator.referenceNode.nodeValue.trim ()); } / * salida de consola [Log] esta es la envoltura de la página [Log] Hello [Log] [Log] ¿Cómo estás? [Iniciar sesión] */ 

El método nextNode() de la API NodeIterator devuelve el siguiente nodo en la lista de nodos de texto iterables . Cuando lo usamos en un ciclo while para acceder a cada nodo en la lista, registramos los contenidos recortados de cada nodo de texto en la consola. La propiedad referenceNode de NodeIterator devuelve el nodo al que el iterador está actualmente conectado .

Como puede ver en la salida, hay algunos nodos de texto con solo espacios vacíos para sus contenidos. Podemos evitar mostrar estos contenidos vacíos utilizando un filtro personalizado :

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, function (node) {return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;}); while (nodeIterator.nextNode ()) {console.log (nodeIterator.referenceNode.nodeValue.trim ()); } / * salida de consola [Log] esta es la envoltura de la página [Log] Hello [Log] ¿Cómo estás? * / 

La función de filtro personalizado devuelve la constante NodeFilter.FILTER_ACCEPT si el nodo de texto no está vacío, lo que lleva a la inclusión de ese nodo en la lista de nodos sobre los que iterará el iterador. Contrariamente, se NodeFilter.FILTER_REJECT constante NodeFilter.FILTER_REJECT para excluir los nodos de texto vacíos de la lista de nodos iterable.

Cómo usar la API TreeWalker

Como mencioné anteriormente, las API NodeIterator y TreeWalker son similares entre sí .

TreeWalker se puede crear utilizando el método createTreeWalker() de la interfaz del document . Este método, al igual que createNodeFilter(), toma tres argumentos : el nodo raíz, un filtro predefinido y un filtro personalizado .

Si utilizamos la API TreeWalker lugar de NodeIterator el fragmento de código anterior tiene el siguiente aspecto:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, function (node) {return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;}); while (treeWalker.nextNode ()) {console.log (treeWalker.currentNode.nodeValue.trim ()); } / * output [Log] este es el contenedor de la página [Log] Hello [Log] ¿Cómo estás? * / 

En lugar de referenceNode, la propiedad currentNode de TreeWalker API se usa para acceder al nodo al que el iterador está conectado actualmente . Además del método nextNode(), Treewalker tiene otros métodos útiles. El método previousNode() (también presente en NodeIterator ) devuelve el nodo anterior del nodo en el que el iterador está actualmente anclado.

Funcionalidad similar es realizada por los parentNode(), firstChild(), lastChild(), previousSibling() y nextSibling() . Estos métodos solo están disponibles en la API de TreeWalker .

Aquí hay un ejemplo de código que genera el último hijo del nodo al que está anclado el iterador:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * salida [Log] 
¿Cómo estás?
* / 

Qué API elegir

Elija la API NodeIterator, cuando necesita simplemente un iterador simple para filtrar y recorrer los nodos seleccionados. Y, elija la API TreeWalker, cuando necesite acceder a la familia de nodos filtrados, como sus hermanos inmediatos.

40 hermosos emoticonos y paquetes de iconos Smiley

Los emoticones son un nuevo medio de comunicación . De hecho, para algunas personas, es mucho más cómodo comunicarse a través de emoticones en lugar de palabras simples. Esta es la razón por la cual cada plataforma de comunicación intenta agregar emojis al sitio web o aplicación.Sin embargo, no todas las aplicaciones o programas crean emoji personalizados para sus usuarios, especialmente cuando hay tantos conjuntos de emoticones disponibles en Internet . Para

(Consejos de tecnología y diseño)

7 Firma las llamadas a su sitio web para una modernización

Todos sabemos que Internet cambia a la velocidad del rayo (podría ser más rápido) y eso significa que las técnicas y tecnologías que utilizamos hace 3 años ¡están obsoletas! Debería estar de pie y mantenerse al día con estos cambios constantemente. Afortunadamente, hay algunas señales de advertencia claras que le indican que su sitio necesita una actualización. Aquí están

(Consejos de tecnología y diseño)