DOM-puun suodattaminen ja siirtäminen JavaScriptin avulla

Tiesitkö, että on olemassa JavaScript API, jonka ainoa tehtävä on suodattaa ja iteroida solmujen läpi haluamme DOM-puusta? Itse asiassa ei ole yhtä, mutta on olemassa kaksi tällaista sovellusliittymää: NodeIterator ja TreeWalker. He ovat melko samanlaisia ​​toistensa kanssa, ja niissä on joitakin hyödyllisiä eroja. Molemmat voivat palauta solmujen luettelo jotka ovat tietyn root-solmun alla, samalla kun ne täyttävät kaikki ennalta määritellyt ja / tai mukautetut suodatussäännöt sovelletaan niihin.

API: eissa käytettävissä olevat ennalta määritetyt suodattimet voivat auttaa meitä kohdistaa erilaisia ​​solmuja kuten tekstisolmuja tai elementtisolmuja ja mukautettuja suodattimia (joita lisäätämme) voi suodattaa edelleen nippu, esimerkiksi etsimällä solmuja, joilla on tietty sisältö. Palautettu solmujen luettelo on iterable, ts. ne voivat olla silmukoitu läpi, ja voimme työskennellä kaikkien luettelon yksittäisten solmujen kanssa.

Miten käyttää NodeIterator API

NodeIterator objekti voidaan luoda käyttämällä createNodeIterator () menetelmän asiakirja käyttöliittymä. Tämä menetelmä ottaa kolme argumenttia. Ensimmäinen tarvitaan; se”s root-solmu joka pitää kaikki solmut, jotka haluamme suodattaa.

Toinen ja kolmas väite ovat valinnainen. Ne ovat ennalta määritellyt ja mukautetut suodattimet, vastaavasti. Ennalta määritetyt suodattimet ovat käytettävissä vakiot NodeFilter esine.

Esimerkiksi jos NodeFilter.SHOW_TEXT vakio lisätään toisena parametrina, se palauttaa iteraattorin a: lle luettelon kaikista juurisolmun alla olevista tekstisolmuista. NodeFilter.SHOW_ELEMENT palaa vain elementin solmut. Katso täydellinen luettelo luettelosta kaikki käytettävissä olevat vakiot.

Kolmas argumentti (mukautettu suodatin) on a toiminto, joka toteuttaa suodattimen.

Tässä on esimerkiksi koodinpätkä:

        
otsikko
 
 tämä on sivun kääre 
Hei
 
Mitä kuuluu?
 
 txt joitakin linkkejä    

Olettaen, että haluamme poista kaikkien tekstin solmujen sisältö #kääre div, näin voimme käyttää sitä NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); kun (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsolin ulostulo [Loki] tämä on sivukääre [Loki] Hei [Loki] [Loki] Miten olet? [Loki] * / 

nextNode () menetelmän NodeIterator API palauttaa seuraavan solmun iteroituvien tekstisolmujen luettelossa. Kun käytämme sitä a sillä aikaa silmukka, jolloin pääset jokaiselle listan solmulle, kirjaudumme jokaisen tekstisolmun leikatun sisällön konsoliin. referenceNode Omaisuutta NodeIterator palauttaa solmun, johon iterator on tällä hetkellä liitetty.

Kuten tulosteesta näkyy, on olemassa joitakin tekstisolmuja, joissa on vain tyhjät välilyönnit niiden sisällön suhteen. Me voimme Älä näytä näitä tyhjiä sisältöjä mukautetun suodattimen avulla:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, toiminto (solmu) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); kun (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsolin ulostulo [Loki] tämä on sivun kääre [Loki] Hei [Loki] Miten olet? * / 

Mukautetun suodattimen toiminto palauttaa vakion NodeFilter.FILTER_ACCEPTjos tekstisolmu ei ole tyhjä, joka johtaa kyseisen solmun sisällyttämiseen solmujen luetteloon, iteraattori iteroidaan yli. Toisin kuin NodeFilter.FILTER_REJECT vakio palautetaan, jotta sulje tyhjät tekstisolmut solmujen luettelosta.

Miten käyttää TreeWalker API

Kuten aiemmin mainitsin, NodeIterator ja TreeWalker API: t ovat samanlaiset.

TreeWalker voidaan luoda käyttämällä createTreeWalker () menetelmän asiakirja käyttöliittymä. Tämä menetelmä, aivan kuten createNodeFilter (), ottaa kolme argumenttia: root-solmu, ennalta määritetty suodatin ja mukautettu suodatin.

Jos me Käytä TreeWalker API sijaan NodeIterator edellinen koodinpätkä näyttää seuraavalta:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, toiminto (solmu) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); kun (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * lähtö [Loki] tämä on sivun kääre [Loki] Hei [Loki] Miten olet? * / 

Sijasta referenceNode, currentNode omaisuutta TreeWalker API on tottunut pääset solmuun, johon iterator on tällä hetkellä liitetty. Lisäksi nextNode () menetelmä, Treewalker on muita hyödyllisiä menetelmiä. previousNode () (myös läsnä) NodeIterator) palauttaa edellisen solmun solmun iterator on tällä hetkellä ankkuroitu.

Samanlaisia ​​toimintoja suorittaa parentNode (), ensimmäinen lapsi(), viimeinen lapsi(), previousSibling (), ja nextSibling () menetelmiä. Nämä menetelmät ovat saatavilla vain TreeWalker API.

Tässä on esimerkkikoodi antaa solmun viimeisen lapsen iterator on ankkuroitu:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * lähtö [Loki] 
Mitä kuuluu?
 * / 

Mikä API valitaan

Valitse NodeIterator API, kun olet tarvitsemme vain yksinkertaisen iteraattorin suodattaa ja silmukoi valitut solmut. Ja valitse TreeWalker API, kun olet täytyy käyttää suodatettujen solmujen perhettä, kuten heidän välittömät sisarukset.