Slik filtrerer og traverser DOM-treet med JavaScript

Visste du at det er en JavaScript API, hvis eneste oppdrag er å 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 eventuelle forhåndsdefinerte og / eller egendefinerte filterregler som brukes på dem.

De forhåndsdefinerte filtene som er tilgjengelige i APIene, kan hjelpe oss med å målrette mot forskjellige typer noder, for eksempel tekstnoder eller elementnoder, og tilpassede filtre (lagt til av oss) kan ytterligere filtrere gjengen, for eksempel ved å lete etter noder med bestemt innhold. Den returnerte listen over noder er iterable, det vil si at de kan sløyfes gjennom, og vi kan jobbe med alle de enkelte noder i listen.

Slik bruker du NodeIterator API

Et NodeIterator objekt kan opprettes ved hjelp av createNodeIterator() i document . Denne metoden tar tre argumenter . Den første er nødvendig; Det er rotenoden som inneholder alle noder vi ønsker å filtrere ut.

Det andre og tredje argumentet er valgfritt . De er henholdsvis forhåndsdefinerte og tilpassede filtre . De forhåndsdefinerte NodeFilter er tilgjengelige for bruk som konstanter i NodeFilter objektet .

Hvis for eksempel NodeFilter.SHOW_TEXT konstanten legges til som den andre parameteren, returnerer den en iterator for en liste over alle tekstnoder under rotnoden . NodeFilter.SHOW_ELEMENT returnerer bare elementnoder . Se en fullstendig liste over alle tilgjengelige konstanter .

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

Her er et eksempel kodestykke :

 tittel 
 dette er sidenomslaget 
Hallo
Hvordan har du det?
 txt  

Forutsatt at vi vil pakke ut innholdet i alle tekstnoder som er inne i #wrapper, så #wrapper vi om det ved å bruke 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] */ 

nextNode() -metoden til NodeIterator API returnerer neste knutepunkt i listen over iterable tekst noder . Når vi bruker det i en stundsløyfe for å få tilgang til hver knutepunkt i listen, logger vi det trimmet innholdet av hver tekstknut i konsollen. NodeIterator egenskapen til 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 konstant NodeFilter.FILTER_ACCEPT hvis NodeFilter.FILTER_ACCEPT ikke er tom, noe som fører til inkluderingen av den noden i listen over noder, vil iteratoren bli iterating over. I motsetning til at NodeFilter.FILTER_REJECT konstanten returneres for å ekskludere de tomme tekstnoderne fra den iterable listen over noder.

Slik bruker du TreeWalker API

Som nevnt tidligere, er NodeIterator og TreeWalker APIer likt hverandre .

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

Hvis vi bruker TreeWalker API i stedet for NodeIterator den tidligere NodeIterator 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 [Log] Hvordan går det? * / 

I stedet for referenceNode, brukes currentNode egenskapen til TreeWalker API for å få tilgang til noden som iteratoren er vedlagt for øyeblikket . I tillegg til nextNode() -metoden har Treewalker andre nyttige metoder. NodeIterator previousNode() (også tilstede i NodeIterator ) returnerer den forrige noden til noden som iteratoren for tiden er forankret til.

Lignende funksjoner utføres av parentNode(), firstChild(), lastChild(), previousSibling() og nextSibling() metoder. Disse metodene er bare tilgjengelige i TreeWalker API .

Her er et kodeeksempel som gir ut det siste barnet til noden, som 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 loop gjennom de valgte nodene. Og velg TreeWalker API, når du trenger tilgang til den filtrerte TreeWalker familie, for eksempel deres nærmeste søsken.

15 Android Apps For IELTS, TOEFL & GRE Forberedelse

Det er ulike eksamener og utfordringer som vi alle møter i livet . På noe tidspunkt, uansett grunn, kan denne utfordringen bare være IELTS (International English Language Testing Service), TOEFL (Test of English as Foreign Language) eller GRE (Graduate Record Examination). Disse 3 eksamenene tjener sine egne funksjoner og har sin egen pensum og markeringsordning.Ua

(Tekniske og design tips)

Irriterende webdesign trender som du bør unngå (eller gjør i moderasjon)

Folk elsker å følge trender . Og det er ikke noe dårlig om det. Faktisk, for å være "kult", er følgende trender et must. Dette er svært viktig for webdesignere for å holde tritt med den voksende konkurransen. Men når det gjelder følgende trender, har webdesignere ofte en tendens til å tenke over eller overse noen av de viktigste detaljene, spesielt for brukervennlighet.I dette in

(Tekniske og design tips)