no.hideout-lastation.com
Paradis For Designere Og Utviklere


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 :

 Dokument 

tittel

dette er sidenomslaget

Hallo

Hvordan har du det?

txt
opphavsrett

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.

Lykke kan være den beste strategien for å øke produktiviteten: Slik er det

Lykke kan være den beste strategien for å øke produktiviteten: Slik er det

Du kan kalle det en hemmelighet, "liv hack" eller bare sunn fornuft, men lykke er nøkkelen til produktivitet. Å være positiv og fornøyd kan være en av de raskeste og mest effektive måtene å forbedre produktiviteten på arbeidsplassen. Ulike studier har vist at du vil føle betydelig mindre stress i den daglige aktiviteten - i og utenfor arbeidsplassen - fra en positiv holdningsendringDessverre, for mange medlemmer av arbeidsstyrken som tilbringer uken bak et skrivebord eller en disk, lyder det ikke bra om de føler seg lykkelige og arbeider produktivt som de går hånd i hånd (selv om de b

(Tekniske og design tips)

Slik starter du et godt nyttår

Slik starter du et godt nyttår

Jeg skal være helt ærlig med deg. Dette er en skriftlig utfordring. Det er en av de torturapparatene som forfattere pålegger seg selv for å hjelpe dem bedre å skrive bedre innhold. For designere er det noe som Begrensninger. Min utfordring er Sesame-Street styled: dette innlegget blir brakt til deg med bokstaven 'O'. Jeg

(Tekniske og design tips)