Slik filtrerer og traverser DOM-treet med JavaScript

Visste du at det er en JavaScript API som har som eneste oppdrag å filtrere ut og iterere gjennom noder Vi ønsker fra et DOM-tre? Faktisk, ikke en, men det er to slike APIer: NodeIterator og TreeWalker. De er ganske likte hverandre, med noen nyttige forskjeller. Begge kan returnere en liste over noder som er til stede under en gitt rotnode mens de overholder noen forhåndsdefinerte og / eller egendefinerte filterregler anvendt på dem.

De forhåndsdefinerte filtene som er tilgjengelige i APIene, kan hjelpe oss mål forskjellige typer noder for eksempel tekstnoder eller elementnoder, og tilpassede filtre (lagt til av oss) kan filtrere gjengen ytterligere, for eksempel ved å lete etter noder med bestemt innhold. Den returnerte listen over noder er iterable, dvs. de kan være looped gjennom, og vi kan jobbe med alle de enkelte noder i listen.

Hvordan bruke NodeIterator API

EN NodeIterator objekt kan opprettes ved hjelp av createNodeIterator () metode av dokument grensesnitt. Denne metoden tar tre argumenter. Den første er nødvendig; den”s den root node som holder alle noder vi ønsker å filtrere ut.

Det andre og tredje argumentet er valgfri. De er forhåndsdefinerte og tilpassede filtre, henholdsvis. De forhåndsdefinerte filtene er tilgjengelige for bruk som konstanter av NodeFilter gjenstand.

For eksempel, hvis NodeFilter.SHOW_TEXT konstant legges til som den andre parameteren, vil den returnere en iterator for a liste over alle tekstnoder under rotnoden. NodeFilter.SHOW_ELEMENT vil returnere bare elementnoder. Se en fullstendig liste over alle tilgjengelige konstanter.

Det tredje argumentet (det egendefinerte filteret) er a funksjon som implementerer filteret.

Her er en Eksempel kodestykke:

        
tittel
 
 dette er sideomslaget 
Hallo
 
Hvordan har du det?
 
 tekst noen kobling    

Forutsatt at vi vil trekk ut innholdet i alle tekstnoder som er inne i #wrapper div, Slik bruker vi det NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); mens (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsollutgang [Logg] dette er sidekartet [Logg] Hei [Logg] [Logg] Hvordan går det? [Logg] */ 

De nextNode () metode av NodeIterator API returnerer neste knutepunkt i listen over iterable tekst noder. Når vi bruker det i a samtidig som sløyfe for å få tilgang til hver knutepunkt i listen, logger vi det trimmet innholdet av hver tekstknut i konsollen. De referenceNode tilhører NodeIterator returnerer noden som iteratoren er knyttet til.

Som du kan se i utgangen, er det noen tekstnoder med bare tomme mellomrom for innholdet. Vi kan unngå å vise disse tomme innholdene ved hjelp av et egendefinert filter:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, funksjon (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); mens (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsollutgang [Logg] dette er sidekartet [Logg] Hei [Logg] Hvordan går det? * / 

Den egendefinerte filterfunksjonen returnerer konstanten NodeFilter.FILTER_ACCEPThvis tekstnoden ikke er tom, som fører til inkluderingen av den noden i listen over noder, vil iteratoren være iterating over. I motsetning til NodeFilter.FILTER_REJECT Konstant er returnert for å ekskluder de tomme tekstnoderne fra den iterable listen over noder.

Hvordan bruke TreeWalker API

Som jeg nevnte før, den NodeIterator og TreeWalker APIer er ligner på hverandre.

TreeWalker kan opprettes ved hjelp av createTreeWalker () metode av dokument grensesnitt. Denne metoden, akkurat som createNodeFilter (), tar tre argumenter: rotnoden, et forhåndsdefinert filter og et tilpasset filter.

Hvis vi bruke TreeWalker API i stedet for NodeIterator forrige kodestykke ser ut som følgende:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, funksjon (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); mens (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * utgang [Logg] dette er sidekartet [Logg] Hei [Logg] Hvordan går det? * / 

I stedet for referenceNode, de currentNode eiendom av TreeWalker API er vant til tilgang til noden som iteratoren er for øyeblikket tilkoblet. I tillegg til det nextNode () metode, Treewalker har andre nyttige metoder. De previousNode () metode (også tilstede i NodeIterator) returnerer forrige node av noden er iteratoren for tiden forankret til.

Lignende funksjoner utføres av parentNode (), første barn(), siste barn(), previousSibling (), og nextSibling () metoder. Disse metodene er Kun tilgjengelig i TreeWalker API.

Her er et kodeeksempel som sender ut det siste barnet til noden iteratoren er forankret til:

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

Hvilken API å velge

Velg NodeIterator API, når du trenger bare en enkel iterator å filtrere og sløyfe gjennom de valgte nodene. Og velg TreeWalker API, når du må ha tilgang til den filtrerte noderens familie, som deres nærmeste søsken.