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.

Alt du trenger å vite om Microsoft Build 2017

Microsoft har nettopp avsluttet Build 2017-arrangementet, og med det har vi nå en ide om hva selskapet skal jobbe for i det neste året eller så.Mens hendelsen mangler i maskinvare avslører, som det vil bli gjort på en separat begivenhet planlagt senere i mai, opplyste selskapet en rekke detaljer om fremtiden for Windows 10, Cortana, kunstig intelligens og mye mer. Her

(Tekniske og design tips)

Små bedrifter: Hvorfor du bør fokusere på ditt visuelle innhold

Du har jobbet hardt og lurte ut blogger og artikler med lange bilder sammen med noen få bilder, men til din forferdelse, får du fortsatt ikke nok trafikk eller engasjement på bloggen din. I denne alderen av alle slags store data blir folk ofte bombardert med mye informasjon de heller ikke trenger eller ikke vet hvordan de skal forbruke .Tr

(Tekniske og design tips)