it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


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 pagina

Ciao

Come stai?

txt
i diritti d'autore

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.

Gli adesivi e le videocamere a mani libere arrivano su Instagram Stories

Gli adesivi e le videocamere a mani libere arrivano su Instagram Stories

Con Natale alle porte, Instagram Stories entra nello spirito del dare dato che il servizio include adesivi e una fotocamera a mani libere con il suo aggiornamento 10.3 .Per prima cosa iniziamo con gli adesivi, Instagram Stories ora presenta un nuovo pulsante adesivo che ti consente di aggiungere adesivi su una foto o un video

(Consigli tecnici e di design)

Test del supporto SVG nei motori di browser Web [Case Study]

Test del supporto SVG nei motori di browser Web [Case Study]

SVG (Scalable Vector Graphics) è ufficialmente supportato da tutti i principali browser Web, incluso Internet Explorer. Il supporto si estende su una vasta gamma di software di editor di immagini, in particolare Inkscape, che usa SVG come formato nativo (Se vuoi un aggiornamento su SVG, clicca qui).

(Consigli tecnici e di design)