Kako filtrirati in premikati drevo DOM z JavaScriptom

Ali ste vedeli, da obstaja JavaScript API, katerega edina naloga je Filtrirajte in ponovite skozi vozlišča želimo iz drevesa DOM? Pravzaprav ni eden, ampak dva API-ja: NodeIterator in TreeWalker. So si zelo podobni, z nekaj koristnimi razlikami. Oba lahko vrne seznam vozlišč ki so prisotni pod danim korenskim vozliščem med izpolnjevanjem vsa vnaprej določena in / ali prilagojena pravila filtriranja nanje.

Vnaprej določeni filtri, ki so na voljo v API-jih, nam lahko pomagajo ciljate na različne vrste vozlišč kot so vozlišča za besedila ali vozlišča elementov in filtri po meri (ki jih dodamo sami) nadalje filtrirajte šop, na primer z iskanjem vozlišč s specifično vsebino. Vrnjeni seznam vozlišč je iterable, lahko so preletel, in lahko delamo z vsemi posameznimi vozlišči na seznamu.

Kako uporabljati NodeIterator API

A NodeIterator lahko ustvarite z uporabo createNodeIterator () metodo. \ t dokument vmesnik. Ta metoda vzame tri argumente. Prvi je obvezen; to”s the korensko vozlišče ki drži vsa vozlišča, ki jih želimo filtrirati.

Drugi in tretji argument sta neobvezno. To so vnaprej določeni in prilagojeni filtri, v tem zaporedju. Vnaprej določeni filtri so na voljo za uporabo kot konstante NodeFilter predmet.

Na primer, če je NodeFilter.SHOW_TEXT kot drugi parameter doda konstanto, ki bo vrnila iterator za a seznam vseh besedilnih vozlišč pod korenskim vozliščem. NodeFilter.SHOW_ELEMENT se bo vrnil samo vozlišča elementov. Oglejte si celoten seznam vse razpoložljive konstante.

Tretji argument (filter po meri) je a funkcija, ki izvaja filter.

Tukaj je na primer odrezek kode:

        
naslov
 
 to je ovojna stran 
zdravo
 
Kako ste??
 
 txt nekaj povezav    

Ob predpostavki, da želimo izvleči vsebino vseh besedilnih vozlišč, ki so znotraj. \ t # wrapper div, to je način, kako ga uporabljamo NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); medtem (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konzolni izhod [Log] to je ovojna stran [Log] Hello [Log] [Log] [Log] Kako ste? [Dnevnik] * / 

The nextNode () metodo. \ t NodeIterator API vrne naslednje vozlišče na seznamu iterabilnih besedilnih vozlišč. Ko ga uporabimo v a medtem zanke za dostop do vsakega vozlišča na seznamu, zabeležimo obrezano vsebino vsakega besedilnega vozlišča v konzolo. The referenceNode lastnina NodeIterator vrne vozlišče, na katero je trenutno priključen iterator.

Kot lahko vidite v izhodu, so nekatera besedilna vozlišča s praznimi prostori za njihovo vsebino. Mi lahko Izogibajte se prikazovanju prazne vsebine s filtrom po meri:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, funkcija (vozlišče) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); medtem (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konzolni izhod [Log] to je ovojna stran [Log] Hello [Log] Kako ste? * / 

Funkcija filtriranja po meri vrne konstanto NodeFilter.FILTER_ACCEPTče besedilno vozlišče ni prazno, ki vodi do vključitve tega vozlišča v seznam vozlišč, ki jih bo iterator ponovil. Nasprotno, NodeFilter.FILTER_REJECT konstanto se vrne, da izključite prazna besedilna vozlišča s seznama vozlišč.

Kako uporabljati TreeWalker API

Kot sem že omenil, NodeIterator in TreeWalker API-ji podobne.

TreeWalker lahko ustvarite z uporabo createTreeWalker () metodo. \ t dokument vmesnik. Ta metoda, tako kot createNodeFilter (), vzame tri argumente: korensko vozlišče, vnaprej določen filter in filter po meri.

Če bomo uporabi TreeWalker API namesto NodeIterator prejšnji odrezek kode izgleda tako:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, funkcija (vozlišče) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); medtem (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * output [Log] to je ovojna stran [Log] Hello [Log] Kako ste? * / 

Namesto referenceNode, currentNode premoženja TreeWalker Uporabljen je API dostop do vozlišča, na katerega je trenutno priključen iterator. Poleg nextNode () metodo, Treewalker ima druge uporabne metode. The previousNode () metodo (prisotna tudi v NodeIterator) vrne prejšnje vozlišče vozlišča, za katerega je trenutno zasidran iterator.

Podobna funkcionalnost je izvedena s strani parentNode (), firstChild (), lastChild (), previousSibling (), in nextSibling () metod. Te metode so na voljo samo v TreeWalker API.

Tukaj je primer kode izpisuje zadnjega otroka vozlišča iterator je zasidran na:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * izhod [Dnevnik] 
Kako ste??
 * / 

Kateri API izbrati

Izberite NodeIterator API, ko ste potrebujete le preprost iterator za filtriranje in zavijanje skozi izbrana vozlišča. In, izberite TreeWalker API, ko ste dostop do filtrirane družine vozlišč, kot so njihove neposredne brate in sestre.