Cómo filtrar y atravesar 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 ¿Queremos de un árbol DOM? De hecho, no una, pero hay dos API de este tipo: NodeIterator y Caminante del árbol. 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 dado mientras cumplen con Cualquier regla de filtro predefinida y / o personalizada. aplicado a ellos.

Los filtros predefinidos disponibles en las API pueden ayudarnos dirigirse a diferentes tipos de nodos tales como nodos de texto o nodos de elementos, y filtros personalizados (agregados por nosotros) filtrar aún más el grupo, por ejemplo buscando nodos con contenidos específicos. La lista de nodos devueltos son iterable, es decir, pueden ser en bucle, y podemos trabajar con todos los nodos individuales en la lista.

Cómo usar el NodeIterator API

UNA NodeIterator objeto puede ser creado usando el createNodeIterator () método de la documento interfaz. Este método toma tres argumentos. Se requiere el primero; eso”s el nodo raíz que contiene todos los nodos que queremos filtrar.

El segundo y tercer argumento son Opcional. Ellos son los Filtros predefinidos y personalizados., respectivamente. Los filtros predefinidos están disponibles para su uso como constantes de la NodeFilter objeto.

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

El tercer argumento (el filtro personalizado) es un Función que implementa el filtro..

Aquí hay una Fragmento de código de ejemplo:

        
título
 
 este es el envoltorio de la página 
Hola
 
Cómo estás?
 
 TXT algun enlace    

Suponiendo que queremos Extraiga el contenido de todos los nodos de texto que están dentro de la #envoltura div, Así es como lo hacemos usando 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 [Registro] este es el contenedor de la página [Registro] Hola [Registro] [Registro] ¿Cómo está? [Iniciar sesión] */ 

los nextNode () método de la NodeIterator API devuelve el siguiente nodo en la lista de nodos de texto iterables. Cuando lo usamos en una mientras Para acceder a cada nodo de la lista, registramos los contenidos recortados de cada nodo de texto en la consola. los nodo de referencia propiedad de NodeIterator devuelve el nodo al que está actualmente adjunto el iterador.

Como se puede ver en la salida, hay algunos nodos de texto con espacios vacíos para su contenido. Podemos Evite 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 [Registro] este es el contenedor de la página [Registro] Hola [Registro] ¿Cómo está? * / 

La función de filtro personalizado devuelve la constante NodeFilter.FILTER_ACCEPTsi 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 se repetirá el iterador. Al contrario, el NodeFilter.FILTER_REJECT constante se devuelve con el fin de excluir los nodos de texto vacíos de la lista iterable de nodos.

Cómo usar el Caminante del árbol API

Como mencioné antes, la NodeIterator y Caminante del árbol Las API son similares entre sí.

Caminante del árbol puede ser creado usando el createTreeWalker () método de la documento interfaz. Este método, al igual que createNodeFilter (), toma tres argumentos: El nodo raíz, un filtro predefinido y un filtro personalizado..

Si nosotros utilizar el Caminante del árbol API en lugar de NodeIterator El fragmento de código anterior es similar al siguiente:

 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 ());  / * salida [Registro] este es el contenedor de la página [Registro] Hola [Registro] ¿Cómo estás? * / 

En lugar de nodo de referencia, la nodo actual propiedad de la Caminante del árbol API se utiliza para acceder al nodo al que está conectado el iterador actualmente. Además de nextNode () método, Caminante de arboles Tiene otros métodos útiles. los Nodo anterior () método (también presente en NodeIterator) devuelve el nodo anterior del nodo al que está actualmente anclado el iterador.

Una funcionalidad similar es realizada por el parentNode (), primer hijo(), último niño(), anteriorSibling (), y proximo hermano() metodos Estos metodos son solo disponible en el Caminante del árbol API.

Aquí hay un ejemplo de código que Salidas del último hijo del nodo. El iterador está anclado a:

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

Que API elegir

Elegir la NodeIterator API, cuando Necesito un simple iterador para filtrar y recorrer los nodos seleccionados. Y, elige el Caminante del árbol API, cuando Necesidad de acceder a la familia de nodos filtrados., tales como sus hermanos inmediatos.