Kā filtrēt un pārvietot DOM koku ar JavaScript

Vai zinājāt, ka ir JavaScript API, kuras vienīgais uzdevums ir filtrējiet un atkārtojiet caur mezgliem mēs vēlamies no DOM koka? Faktiski ne viens, bet ir divas šādas API: NodeIterator un TreeWalker. Viņi ir diezgan līdzīgi viens otram ar dažām noderīgām atšķirībām. Abi var atgriezt mezglu sarakstu kas atrodas zem noteiktā saknes mezgla, vienlaikus ievērojot iepriekš definēti un / vai pielāgoti filtra noteikumi uz tiem attiecas.

Iepriekšējie definētie filtri, kas pieejami API, var mums palīdzēt mērķēt dažādus mezglus piemēram, teksta mezgli vai elementu mezgli, un pielāgotie filtri (kurus pievienojuši mēs) tālāk filtrēt ķekars, piemēram, meklējot mezglus ar konkrētu saturu. Atgrieztais mezglu saraksts ir iterable, tātad tie var būt cauri, un mēs varam strādāt ar visiem saraksta atsevišķajiem mezgliem.

Kā lietot NodeIterator API

A NodeIterator objektu var izveidot, izmantojot createNodeIterator () metode dokumentu saskarne. Šī metode pieņem trīs argumentus. Pirmais ir nepieciešams; to”s the saknes mezgls kas satur visus mezglus, kurus mēs vēlamies filtrēt.

Otrais un trešais arguments ir neobligāti. Tie ir iepriekš definēti un pielāgoti filtri, attiecīgi. Iepriekš definētie filtri ir pieejami kā konstantes NodeFilter objektu.

Piemēram, ja NodeFilter.SHOW_TEXT konstantu pievieno kā otro parametru, tas atgriezīs iteratoru a visu sakņu mezglu teksta mezglu saraksts. NodeFilter.SHOW_ELEMENT atgriezīsies tikai elementu mezgli. Skatīt pilnu sarakstu ar visas pieejamās konstantes.

Trešais arguments (pielāgots filtrs) ir a funkcija, kas īsteno filtru.

Šeit ir piemēram, koda fragments:

        
nosaukums
 
 tas ir lapas iesaiņojums 
Sveiki
 
Kā tev iet?
 
 txt kāda saite    

Pieņemot, ka mēs vēlamies izvilkt visu teksta mezglu saturu, kas atrodas #wrapper div, tas ir veids, kā mēs to izmantojam NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); kamēr (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsoles izeja [Log] tas ir lapas iesaiņojums [Log] Sveiki [Log] [Log] Kā jums ir? [Žurnāls] * / 

The nextNode () metode NodeIterator API atgriež nākamo mezglu iterable teksta mezglu sarakstā. Kad mēs to lietojam a kamēr cilpa, lai piekļūtu katram saraksta mezglam, mēs logā sagriezām katra teksta mezgla apgriezto saturu. The referencesNode īpašums NodeIterator atgriež mezglu, ko iterators pašlaik pievieno.

Kā jūs varat redzēt izvadā, ir daži teksta mezgli ar tukšām telpām to saturam. Mēs varam izvairieties no šo tukšo saturu rādīšanas, izmantojot pielāgotu filtru:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, funkcija (mezgls) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); kamēr (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsoles izeja [Log] tas ir lapas iesaiņojums [Log] Sveiki [Log] Kā tu esi? * / 

Pielāgotā filtra funkcija atgriež konstantu NodeFilter.FILTER_ACCEPTja teksta mezgls nav tukšs, kas noved pie šī mezgla iekļaušanas mezglu sarakstā, iterators atkārtojas. Pretēji tam NodeFilter.FILTER_REJECT konstante tiek atgriezta, lai izslēdziet tukšos teksta mezglus no atkārtojamā mezglu saraksta.

Kā lietot TreeWalker API

Kā jau iepriekš minēju, NodeIterator un TreeWalker API ir līdzīgi.

TreeWalker var izveidot, izmantojot createTreeWalker () metode dokumentu saskarne. Šī metode, tāpat kā createNodeFilter (), pieņem trīs argumentus: saknes mezglu, iepriekš noteiktu filtru un pielāgotu filtru.

Ja mēs izmantot TreeWalker API vietā NodeIterator iepriekšējais koda fragments izskatās šādi:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, funkcija (mezgls) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); kamēr (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * izvade [Log] tas ir lapas iesaiņojums [Log] Sveiki [Log] Kā jūs esat? * / 

Tā vietā referencesNode, the currentNode īpašums TreeWalker API tiek izmantota piekļūt mezglam, kuram pašlaik ir pievienots iterators. Papildus nextNode () metodi, Treewalker ir citas noderīgas metodes. The iepriekšējāNode () metode (kas arī atrodas. \ t NodeIterator) atgriež iepriekšējo mezglu no mezgla, iterators pašlaik ir nostiprināts.

Līdzīgu funkcionalitāti veic vecāku kods (), pirmais bērns (), Pēdējais bērns(), iepriekšējāSibling (), un nextSibling () metodes. Šīs metodes ir pieejams tikai TreeWalker API.

Šeit ir koda piemērs izvada mezgla pēdējo bērnu iterators ir pievienots:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * izeja [Log] 
Kā tev iet?
 * / 

Kura API izvēlēties

Izvēlies NodeIterator API, kad jūs nepieciešams tikai vienkāršs iterators filtrēt un cilpēt caur izvēlētajiem mezgliem. Un izvēlieties TreeWalker API, kad jūs nepieciešams piekļūt filtrēto mezglu ģimenei, piemēram, viņu tūlītējie brāļi un māsas.