Come filtrare e attraversare l'albero DOM con JavaScript

Sapevi che esiste un'API JavaScript la cui unica missione è filtra e filtra attraverso i nodi vogliamo da un albero DOM? In realtà, non uno ma ci sono due API di questo tipo: NodeIterator e TreeWalker. Sono abbastanza simili tra loro, con alcune differenze utili. Entrambi possono restituisce un elenco di nodi che sono presenti in un dato nodo radice durante il rispetto eventuali regole di filtro predefinite e / o personalizzate applicato a loro.

I filtri predefiniti disponibili nelle API possono aiutarci scegliere diversi tipi di nodi come nodi di testo o nodi di elementi e filtri personalizzati (aggiunti da noi) ulteriormente filtrare il mazzo, per esempio cercando i nodi con contenuti specifici. L'elenco dei nodi restituito è iterabile, cioè possono essere loop through, e possiamo lavorare con tutti i singoli nodi nell'elenco.

Come usare il NodeIterator API

UN NodeIterator l'oggetto può essere creato usando il createNodeIterator () metodo del documento interfaccia. Questo metodo accetta tre argomenti. Il primo è richiesto; esso”s il nodo radice che contiene tutti i nodi che vogliamo filtrare.

Il secondo e il terzo argomento sono opzionale. Loro sono il filtri predefiniti e personalizzati, rispettivamente. I filtri predefiniti sono disponibili per l'uso come costanti del NodeFilter oggetto.

Ad esempio, se il NodeFilter.SHOW_TEXT costante viene aggiunta come secondo parametro restituirà un iteratore per a elenco di tutti i nodi di testo sotto il nodo radice. NodeFilter.SHOW_ELEMENT tornerà solo i nodi degli elementi. Vedi un elenco completo di tutte le costanti disponibili.

Il terzo argomento (il filtro personalizzato) è a funzione che implementa il filtro.

Ecco un esempio di snippet di codice:

        
titolo
 
 questo è il wrapper della pagina 
Ciao
 
Come stai?
 
 testo qualche link    

Supponendo che vogliamo estrarre il contenuto di tutti i nodi di testo che si trovano all'interno del #wrapper div, questo è come lo facciamo usando NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * output della console [Log] questo è il page wrapper [Log] Ciao [Log] [Log] Come stai? [Log] * / 

Il nextNode () metodo del NodeIterator API restituisce il nodo successivo nell'elenco dei nodi di testo iterabili. Quando lo usiamo in a mentre loop per accedere a ciascun nodo nella lista, registriamo i contenuti tagliati di ogni nodo di testo nella console. Il referenceNode proprietà di NodeIterator restituisce il nodo a cui è attualmente collegato l'iteratore.

Come puoi vedere nell'output, ci sono alcuni nodi di testo con solo spazi vuoti per i loro contenuti. Noi possiamo evitare di mostrare questi contenuti vuoti usando un filtro personalizzato:

 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 ());  / * output della console [Log] questo è il page wrapper [Log] Ciao [Log] Come stai? * / 

La funzione di filtro personalizzata restituisce la costante NodeFilter.FILTER_ACCEPTse il nodo di testo non è vuoto, che porta all'inclusione di quel nodo nell'elenco dei nodi, l'iteratore andrà a scorrere. Contrariamente, il NodeFilter.FILTER_REJECT la costante viene restituita al fine di esclude i nodi di testo vuoti dall'elenco iterabile dei nodi.

Come usare il TreeWalker API

Come ho detto prima, il NodeIterator e TreeWalker Le API sono simili tra loro.

TreeWalker può essere creato usando il createTreeWalker () metodo del documento interfaccia. Questo metodo, proprio come createNodeFilter (), accetta tre argomenti: il nodo radice, un filtro predefinito e un filtro personalizzato.

Se noi utilizzare il TreeWalker API al posto di NodeIterator lo snippet di codice precedente ha il seguente aspetto:

 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] questo è il page wrapper [Log] Ciao [Log] Come stai? * / 

Invece di referenceNode, il nodoCorrente proprietà del TreeWalker API è usato per accedere al nodo a cui è collegato attualmente l'iteratore. In aggiunta a nextNode () metodo, TreeWalker ha altri metodi utili. Il previousNode () metodo (presente anche in NodeIterator) restituisce il nodo precedente del nodo a cui è attualmente ancorato l'iteratore.

Funzionalità simile viene eseguita dal parentNode (), Primogenito(), ultimo bambino(), previousSibling (), e nextSibling () metodi. Questi metodi sono disponibile solo nel TreeWalker API.

Ecco un esempio di codice emette l'ultimo figlio del nodo l'iteratore è ancorato a:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * output [Log] 
Come stai?
 * / 

Quale API scegliere

Scegli il NodeIterator API, quando tu serve solo un semplice iteratore filtrare e scorrere attraverso i nodi selezionati. E, scegli il TreeWalker API, quando tu necessità di accedere alla famiglia dei nodi filtrati, come i loro fratelli immediati.