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 :
Documento titolo
questo è il wrapper della paginatxtCiao
Come stai?
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.
35 Nomi di router WiFi insoliti che devi vedere
La risposta alla maggior parte dei tuoi problemi WiFi si trova in un router WiFi, tuttavia, una delle parti più interessanti è la denominazione del router WiFi. È così ovvio e noioso chiamare il router wifi domestico "home123" o homewifi. Alcuni creativi là fuori cercano di rendere i loro nomi di router wifi esilaranti e divertenti .Hai
Come vedere ogni foto che piace a Facebook
Siamo onesti, se usi Facebook, probabilmente lo usi per pedinare o spiare i tuoi amici, il tuo idolo preferito, la tua cotta (ehm, lo sappiamo), il tuo ex, il tuo capo ecc. Se hai una lunga lista di amici, potrebbe essere difficile tenere traccia di ciò che tutti gli altri hanno fatto finora. Questo è un sacco di linee temporali da seguire.M