Kuidas filtreerida ja liikuda DOM puu JavaScriptiga

Kas teadsite, et on olemas JavaScript API, mille ainus ülesanne on filtreerige ja itereerige sõlmede kaudu me tahame DOMi puust? Tegelikult ei ole üks, vaid on kaks sellist API-d: NodeIterator ja TreeWalker. Nad on üksteisega üsna sarnased, mõned kasulikud erinevused. Mõlemad saavad tagastab sõlmede loendi mis on antud juure sõlme all, järgides neid mis tahes eelnevalt määratletud ja / või kohandatud filtri reeglid nende suhtes.

API-liideses saadaval olevad eelnevalt määratletud filtrid võivad meid aidata sihtida erinevaid sõlmede näiteks tekstisõlmed või elemendi sõlmed ja kohandatud filtrid (meie poolt lisatud) saavad filtreerige hunnik edasi, näiteks otsides konkreetse sisuga sõlme. Tagasipööratud sõlmede nimekiri on iterable, st nad võivad olla läbi, ja me saame töötada kõigi loendis olevate üksikute sõlmedega.

Kuidas seda kasutada NodeIterator API

A NodeIterator objekti saab luua kasutades createNodeIterator () meetod dokument liides. See meetod võtab kolm argumenti. Esimene neist on vajalik; seda”s root sõlme mis omab kõik sõlmed, mida me tahame filtreerida.

Teine ja kolmas argument on vabatahtlik. Nad on eelnevalt määratletud ja kohandatud filtrid, vastavalt. Eelnevalt määratletud filtrid on kasutatavad . \ t NodeFilter objekti.

Näiteks, kui NodeFilter.SHOW_TEXT konstant lisatakse teise parameetrina, mis tagastab iteratori a kõigi juhtsõlme all olevate tekstisõlmede loend. NodeFilter.SHOW_ELEMENT naaseb ainult elemendi sõlmed. Vaadake täielikku nimekirja kõik olemasolevad konstandid.

Kolmas argument (kohandatud filter) on a funktsioon, mis rakendab filtrit.

Siin on näiteks koodilõik:

        
pealkiri
 
 see on lehe ümbris 
Tere
 
Kuidas sul läheb?
 
 txt mõni link    

Eeldades, et tahame väljavõtte kõigi tekstisõlmede sisu, mis asuvad #wrapper div, nii me seda kasutame NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); samas (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsooli väljund [Log] see on lehe ümbris [Log] Tere [Logi] [Logi] Kuidas läheb? [Logi] * / 

The nextNode () meetod NodeIterator API tagastab järgmise sõlme iteratiivsete tekstisõlmede loendis. Kui me seda kasutame a samal ajal silmus, et pääseda ligi iga sõlme juurde, logime iga tekstisõlme kärbitud sisu konsooli. The viideNode vara NodeIterator tagastab sõlme, mille iterator on praegu ühendatud.

Nagu väljundis näete, on mõned tekstisõlmed, mille sisu on ainult tühjad. Me saame vältige nende tühjade sisu näitamist kohandatud filtri abil:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, funktsioon (sõlm) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); samas (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsooli väljund [Log] see on lehe ümbris [Log] Tere [Log] Kuidas sul läheb? * / 

Kohandatud filtri funktsioon tagastab konstantse NodeFilter.FILTER_ACCEPTkui tekstisõlm ei ole tühi, mis viib selle sõlme lisamiseni sõlmede loendisse, kus iterator iteriseerub. Vastupidiselt NodeFilter.FILTER_REJECT konstant tagastatakse jätke tühjad tekstisõlmed välja sõlmede loendist.

Kuidas seda kasutada TreeWalker API

Nagu ma varem mainisin, on NodeIterator ja TreeWalker API-d on sarnased.

TreeWalker saab luua kasutades createTreeWalker () meetod dokument liides. See meetod, nagu createNodeFilter (), võtab kolm argumenti: juuremoodul, eelnevalt määratletud filter ja kohandatud filter.

Kui me kasuta TreeWalker API asemel NodeIterator eelmine koodilõik näeb välja järgmine:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, funktsioon (sõlm) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); samas (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * väljund [Log] see on lehe ümbris [Log] Tere [Log] Kuidas sul läheb? * / 

Selle asemel viideNode, the currentNode vara TreeWalker API on harjunud ligipääs sellele sõlmele, kuhu iterator on praegu ühendatud. Lisaks nextNode () meetod, Treewalker on muid kasulikke meetodeid. The eelmineNood () meetod (olemas ka NodeIterator) tagastab eelmise sõlme sõlme suhtes on iterator praegu kinnitatud.

Sarnast funktsionaalsust teostab motherNode (), esimene laps (), viimane laps(), eelmineSibling (), ja järgmineSibling () meetodid. Need meetodid on saadaval ainult TreeWalker API.

Siin on kooditähis väljastab sõlme viimase lapse iterator on kinnitatud:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * väljund [Log] 
Kuidas sul läheb?
 * / 

Milline API valida

Vali NodeIterator API, kui oled vaja lihtsalt lihtsat iteraatorit filtreerida ja silmus läbi valitud sõlmede. Ja vali TreeWalker API, kui oled filtreeritud sõlmede perekonnale juurdepääs, nagu nende otsesed õed-vennad.