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.

40 Sfondi di Spazio e Pianeti assolutamente incredibili

Lo spazio è vasto, sia in termini di superficie che come una grande fonte di ispirazione . Ci sono spazio per siti web tematici merchandise, abbigliamento, film, musica e persino feste di compleanno a tema spaziale.Quindi, se sei un fan dello spazio e vuoi vedere un'immagine affascinante di pianeti e galassie sullo sfondo del desktop, dai un'occhiata a questa vetrina di sfondi spaziali e pianeti assolutamente sbalorditivi e guarda se trovi quello perfetto per lo schermo del tuo computer .

(Consigli tecnici e di design)

Ora puoi scaricare e guardare Netflix offline

C'era una volta, Netflix sostiene che una modalità offline per i suoi servizi è "non accadrà mai". Ottime notizie per gli utenti, in avanti veloce per oggi Netflix ha deciso di abbandonare il discorso e camminare verso la modalità offline. Disponibile per tutti gli utenti Netflix indipendentemente dai livelli, ora Netflix ti consente di scaricare "seleziona programmi TV e film" per una visione successiva.Gli

(Consigli tecnici e di design)