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.

20 Inspirerende ideer for minimal hjemliv

Den vanlige ideen de fleste av oss har når det gjelder boligareal er at vi raskt løper ut av det. Leie og land er dyrt i områder med store muligheter, og likevel er det svært kreative mennesker som gikk videre og tok den lille plassen de har og gjort mest mulig ut av det .Vi snakker om smart mikro-living hvor boligeier bruker smart, stuvbare møbler, multifunksjonelle husarmaturer, smart arkitektonisk design eller en kombinasjon av alle tre for å kutte ned på størrelsen på boliger, uten å spise i komfortene vi har blitt vant til .I dette i

(Tekniske og design tips)

20 Betydningsfulle Valentinsdagsgaver til par

Valentinsdag er raskt nærmer seg, og det er den perfekte tiden til å tenke på hva du skal gi til din betydelige andre. Det er en annen flott mulighet til å vise den andre halvparten hvor mye du elsker dem. De beste gaver er vanligvis de som begge kan nyte sammen.Så i dag har jeg satt sammen et unikt utstillingsvindu med 20 gaver til par for Valentinsdag . Utv

(Tekniske og design tips)