Kaip filtruoti ir nukreipti DOM medį su „JavaScript“

Ar žinote, kad yra „JavaScript“ API, kurios vienintelė misija yra filtruokite ir pasikartokite per mazgus mes norime iš DOM medžio? Iš tiesų ne vienas, bet yra dvi tokios API: „NodeIterator“ ir „TreeWalker“. Jie gana panašūs vienas su kitu, naudingi skirtumai. Abi gali grąžina mazgų sąrašą kurie yra po tam tikru šaknų mazgu, tuo pačiu laikydamiesi bet kurias iš anksto nustatytas ir (arba) pritaikytas filtravimo taisykles jiems taikomas.

Iš anksto nustatyti filtrai, esantys API, gali mums padėti nukreipti skirtingų tipų mazgus pvz., teksto mazgai arba elementų mazgai, ir individualūs filtrai (pridedami prie mūsų) toliau filtruoti krūva, pavyzdžiui, ieškant mazgų su konkrečiu turiniu. Grąžinamas mazgų sąrašas iterable, t. y. jie gali būti prijungtas, ir mes galime dirbti su visais atskirais sąrašo mazgais.

Kaip naudoti „NodeIterator“ API

A „NodeIterator“ Objektas gali būti sukurtas naudojant createNodeIterator () metodas dokumentą sąsaja. Šis metodas trunka tris argumentus. Pirmasis reikalingas; ji”s the šaknų mazgas kuris turi visus mazgus, kuriuos norime filtruoti.

Antrasis ir trečiasis argumentai yra neprivaloma. Jie yra iš anksto nustatyti ir pritaikyti filtrai, atitinkamai. Iš anksto nustatyti filtrai gali būti naudojami kaip . \ t „NodeFilter“ objektą.

Pavyzdžiui, jei „NodeFilter.SHOW_TEXT“ kaip antrasis parametras pridedamas konstanta, ji grąžins iteratorių a visų šakninių mazgų po šakniniu mazgu sąrašas. „NodeFilter.SHOW_ELEMENT“ grįš tik elementų mazgai. Žr. Pilną sąrašą visos galimos konstantos.

Trečiasis argumentas (pasirinktinis filtras) yra a funkcija, kuri įgyvendina filtrą.

Čia yra pavyzdys kodo fragmentas:

        
pavadinimas
 
 tai yra puslapio apvyniojimas 
Sveiki
 
Kaip laikaisi?
 
 txt tam tikra nuoroda    

Darant prielaidą, kad norime ištraukite visų teksto mazgų, esančių viduje, turinį #vyniojamasis popierius div, taip mes einame apie tai „NodeIterator“:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); o (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsolės išėjimas [Log] tai puslapio apvyniojimas [Prisijungti] Sveiki [Prisijungti] [Prisijungti] Kaip tu? [Prisijungti] * / 

The nextNode () metodas „NodeIterator“ API grąžina kitą mazgą iterable teksto mazgų sąraše. Kai mes jį naudojame a kol kilpa, kad galėtumėte pasiekti kiekvieną sąrašo mazgą, į kiekvieną konsolę įrašome kiekvieno teksto mazgo apipavidalintą turinį. The referenceNode nuosavybė „NodeIterator“ grąžina mazgas, kurį iteratorius šiuo metu yra prijungtas.

Kaip matote išvestyje, yra keletas teksto mazgų, kuriuose yra tik tuščios vietos jų turiniui. Mes galime nepamirškite, kad šie tuščia medžiaga būtų naudojama naudojant pasirinktą filtrą:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, funkcija (mazgas) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); o (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsolės išėjimas [Log] tai puslapio apvyniojimas [Log] Sveiki [Log] Kaip tu? * / 

Pasirinktinio filtro funkcija grąžina konstanta NodeFilter.FILTER_ACCEPTjei teksto mazgas nėra tuščias, kuris veda prie to mazgo įtraukimo į mazgų sąrašą, kurį iteratorius bus kartojamas. Priešingai, NodeFilter.FILTER_REJECT pastovumas grąžinamas siekiant neįtraukti tuščių teksto mazgų iš pasikartojančio mazgų sąrašo.

Kaip naudoti „TreeWalker“ API

Kaip minėjau anksčiau, „NodeIterator“ ir „TreeWalker“ API yra panašūs.

„TreeWalker“ galima sukurti naudojant createTreeWalker () metodas dokumentą sąsaja. Šis metodas, kaip ir createNodeFilter (), trunka tris argumentus: šaknų mazgas, iš anksto nustatytas filtras ir pasirinktinis filtras.

Jei mes naudoti „TreeWalker“ API vietoj „NodeIterator“ ankstesnis kodo fragmentas atrodo taip:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, funkcija (mazgas) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); o (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * išėjimas [Prisijungti] tai yra puslapio apvyniojimas [Prisijungti] Sveiki [Prisijungti] Kaip tu? * / 

Vietoj referenceNode, currentNode turto nuosavybė „TreeWalker“ API yra naudojama prieigą prie mazgo, prie kurio šiuo metu pridedamas iteratorius. Be nextNode () metodas, Treewalker turi kitus naudingus metodus. The ankstesnis kodas () metodas (taip pat yra. \ t „NodeIterator“) grąžina ankstesnį mazgą mazgo iteratorius šiuo metu yra įtvirtintas.

Panašus funkcionalumas atliekamas ir motherNode (), pirmas vaikas (), Paskutinis vaikas(), ankstesnisSiblingas (), ir nextSibling () metodus. Šie metodai yra galima tik „TreeWalker“ API.

Štai kodų pavyzdys siunčia paskutinį mazgo vaiką iteratorius yra pritvirtintas prie:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * išėjimas [žurnalas] 
Kaip laikaisi?
 * / 

Kuris API pasirinkti

Pasirink „NodeIterator“ API, kai jūs reikia tik paprasto iteratoriaus filtruoti ir kilti per pasirinktus mazgus. Ir pasiimkite „TreeWalker“ API, kai jūs reikia prieiti prie filtruotų mazgų šeimos, pavyzdžiui, jų artimiausi broliai ir seserys.