Sådan filtreres og spores DOM-træ med JavaScript

Vidste du, at der er en JavaScript API, hvis eneste mission er at filtrere ud og iterere gennem knuderne vi ønsker fra et DOM træ? Faktisk ikke en, men der er to sådanne API'er: NodeIterator og TreeWalker. De ligner hinanden, med nogle nyttige forskelle. Begge kan returnere en liste over noder der er til stede under en given rodknude under overholdelse af eventuelle foruddefinerede og / eller brugerdefinerede filterregler anvendt på dem.

De foruddefinerede filtre, der er tilgængelige i API'erne, kan hjælpe os målrette forskellige former for noder såsom tekstnoder eller elementnoder og brugerdefinerede filtre (tilføjet af os) kan filtrere bunken yderligere, for eksempel ved at kigge efter noder med specifikt indhold. Den returnerede liste over noder er Iterable, dvs. de kan være sløjfede igennem, og vi kan arbejde med alle de enkelte noder i listen.

Sådan bruger du NodeIterator API

EN NodeIterator objekt kan oprettes ved hjælp af createNodeIterator () metode af dokument grænseflade. Denne metode tager tre argumenter. Den første er påkrævet; det”s root node der indeholder alle de noder, vi ønsker at filtrere ud.

Det andet og tredje argument er valgfri. De er foruddefinerede og brugerdefinerede filtre, henholdsvis. De foruddefinerede filtre er tilgængelige til brug som konstanter af NodeFilter objekt.

For eksempel, hvis NodeFilter.SHOW_TEXT konstant er tilføjet som den anden parameter vil den returnere en iterator for a liste over alle tekstnoderne under rodknuden. NodeFilter.SHOW_ELEMENT kommer tilbage kun element nodene. Se en komplet liste over alle tilgængelige konstanter.

Det tredje argument (det brugerdefinerede filter) er a funktion, der implementerer filteret.

Her er en Eksempel kodestykke:

        
titel
 
 dette er sideindpakningen 
Hej
 
Hvordan har du det?
 
 txt nogle link    

Forudsat at vi vil Udtrække indholdet af alle de tekstnoder, der er inde i #wrapper div, det er sådan, vi bruger det NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); mens (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsoludgang [Log] Dette er sideindpakningen [Log] Hej [Log] [Log] Hvordan går det? [Log] * / 

Det nextNode () metode af NodeIterator API returnerer den næste node i listen over iterable tekst noder. Når vi bruger det i a mens loop for at få adgang til hver node i listen, logger vi det trimmet indhold af hver tekstknude ind i konsollen. Det referenceNode ejendom af NodeIterator returnerer noden, som iteratoren for øjeblikket er knyttet til.

Som du kan se i udgangen, er der nogle tekstnoder med bare tomme mellemrum for deres indhold. Vi kan Undgå at vise disse tomme indhold ved hjælp af et brugerdefineret filter:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, funktion (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); mens (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsol output [Log] dette er sideindpakningen [Log] Hej [Log] Hvordan har du det? * / 

Den brugerdefinerede filterfunktion returnerer konstanten NodeFilter.FILTER_ACCEPThvis tekstnoden ikke er tom, som fører til optagelse af den node i listen over noder, vil iteratoren blive iterating over. I modsætning hertil NodeFilter.FILTER_REJECT Konstant er returneret for at ekskluder de tomme tekstnoder fra den iterable liste over noder.

Sådan bruger du TreeWalker API

Som jeg nævnte før, den NodeIterator og TreeWalker API'er er ligner hinanden.

TreeWalker kan oprettes ved hjælp af createTreeWalker () metode af dokument grænseflade. Denne metode, ligesom createNodeFilter (), tager tre argumenter: rodknuden, et foruddefineret filter og et brugerdefineret filter.

Hvis vi brug TreeWalker API i stedet for NodeIterator den tidligere kodestykke ligner følgende:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, funktion (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); mens (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * output [Log] dette er sideindpakningen [Log] Hej [Log] Hvordan har du det? * / 

I stedet for referenceNode, det currentNode ejendom af TreeWalker API er vant til adgang til den node, som iteratoren er i øjeblikket vedhæftet. Ud over nextNode () metode, Treewalker har andre nyttige metoder. Det previousNode () metode (også til stede i NodeIterator) returnerer den forrige node af noden er iteratoren for tiden forankret til.

Lignende funktionalitet udføres af parentNode (), firstChild (), sidste barn(), previousSibling (), og nextSibling () metoder. Disse metoder er Kun tilgængelig i TreeWalker API.

Her er et kodeeksempel der Udsender det sidste barn i noden iteratoren er forankret til:

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

Hvilken API skal du vælge

Vælg NodeIterator API, når du behøver bare en simpel iterator at filtrere og sløjfe gennem de valgte knudepunkter. Og vælg den TreeWalker API, når du nødt til at få adgang til den filtrerede noder 'familie, som deres nærmeste søskende.