Come filtrare e attraversare l'albero DOM con JavaScript

Sapevi che esiste un'API JavaScript la cui unica missione è filtrare e scorrere tra i nodi che vogliamo da un albero DOM? In realtà, non uno ma ci sono due API: NodeIterator e TreeWalker . Sono abbastanza simili tra loro, con alcune differenze utili. Entrambi possono restituire un elenco di nodi che sono presenti in un determinato nodo root rispettando le regole di filtro predefinite e / o personalizzate applicate.

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

Come utilizzare l'API NodeIterator

Un oggetto NodeIterator può essere creato utilizzando il metodo createNodeIterator() dell'interfaccia del document . Questo metodo richiede tre argomenti . Il primo è richiesto; è il nodo radice che contiene tutti i nodi che vogliamo filtrare.

Il secondo e il terzo argomento sono opzionali . Sono i filtri predefiniti e personalizzati, rispettivamente. I filtri predefiniti sono disponibili per l'uso come costanti dell'oggetto NodeFilter .

Ad esempio, se la costante NodeFilter.SHOW_TEXT viene aggiunta come secondo parametro, verrà restituito un iteratore per un elenco di tutti i nodi di testo sotto il nodo radice . NodeFilter.SHOW_ELEMENT restituirà solo i nodi elemento . Visualizza un elenco completo di tutte le costanti disponibili .

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

Ecco un esempio di snippet di codice :

 titolo 
 questo è il wrapper della pagina 
Ciao
Come stai?
 txt  

Supponendo di voler estrarre il contenuto di tutti i nodi di testo che si trovano nel div #wrapper, questo è il modo in cui lo NodeIterator 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 metodo nextNode() dell'API NodeIterator restituisce il nodo successivo nell'elenco di nodi di testo iterabili . Quando lo usiamo in un ciclo while per accedere a ciascun nodo nell'elenco, registriamo i contenuti tagliati di ogni nodo di testo nella console. La proprietà referenceNode 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. 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 personalizzato restituisce il costante NodeFilter.FILTER_ACCEPT se il nodo di testo non è vuoto, il che porta all'inclusione di quel nodo nell'elenco dei nodi su cui l'iteratore verrà iterato. Contrariamente, la costante NodeFilter.FILTER_REJECT viene restituita per escludere i nodi di testo vuoti dall'elenco iterabile dei nodi.

Come utilizzare l'API TreeWalker

Come accennato in precedenza, le API NodeIterator e TreeWalker sono simili tra loro .

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

Se utilizziamo l'API TreeWalker 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, la proprietà currentNode dell'API TreeWalker viene utilizzata per accedere al nodo a cui è collegato attualmente l'iteratore . Oltre al metodo nextNode(), Treewalker ha altri metodi utili. Il metodo previousNode() (presente anche in NodeIterator ) restituisce il nodo precedente del nodo a cui l'iteratore è attualmente ancorato.

Funzionalità simile viene eseguita dai parentNode(), firstChild(), lastChild(), previousSibling() e nextSibling() . Questi metodi sono disponibili solo nell'API TreeWalker .

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

 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 l'API NodeIterator, quando hai bisogno di un semplice iteratore per filtrare e passare in NodeIterator i nodi selezionati. E, selezionare l'API TreeWalker, quando è necessario accedere alla famiglia dei nodi filtrati, ad esempio i relativi fratelli immediati.

Tocca Emulazione evento con Chrome

Il touchscreen con funzionalità multi-touch ha rivoluzionato i dispositivi mobili come lo smartphone e il tablet, quindi aggiungere funzionalità multi-touch al nostro sito Web è una scelta pratica. Il problema che dobbiamo affrontare è che stiamo sviluppando siti Web su un desktop tradizionale senza funzionalità touchscreen. Qui

(Consigli tecnici e di design)

10 app di musica mobile per audiofili

La cosa più bella di iPhone è che puoi acquistare o scaricare tonnellate di app che ti permettono di fare qualsiasi cosa tu possa immaginare con il tuo telefono. Ciò include ottime app di musica. In questo post, mi piacerebbe condividere con te 10 app musicali per gli amanti della musica che possono facilmente trasformare il tuo iPhone in un potente impianto musicale!Ho

(Consigli tecnici e di design)