Kako filtrirati i prelaziti DOM stablo s JavaScriptom

Jeste li znali da postoji JavaScript API čija je jedina misija filtrirajte i ponavljajte čvorove želimo od DOM stabla? Zapravo, ne jedan, ali postoje dva takva API-ja: NodeIterator i TreeWalker. One su prilično slične jedna drugoj, uz neke korisne razlike. Obje mogu vratiti popis čvorova koji su prisutni pod danim korijenskim čvorom tijekom usklađivanja bilo koja unaprijed definirana i / ili prilagođena pravila filtriranja na njih.

Predefinirani filtri dostupni u API-ima mogu nam pomoći ciljati različite vrste čvorova kao što su čvorovi teksta ili čvorovi elemenata, i prilagođeni filtri (dodani od nas) mogu dalje filtrirati hrpu, na primjer traženjem čvorova s ​​određenim sadržajem. Vraćeni popis čvorova su iterable, tj. oni mogu biti prošao kroz petlju, i možemo raditi sa svim pojedinačnim čvorovima na popisu.

Kako koristiti NodeIterator API

NodeIterator objekt može biti izrađen pomoću createNodeIterator () metoda dokument sučelje. Ova metoda uzima tri argumenta. Prvi je potreban; to”s the root čvor koji drži sve čvorove koje želimo filtrirati.

Drugi i treći argument su neobavezan. Oni su unaprijed definirani i prilagođeni filtri, odnosno. Predefinirani filtri su dostupni za upotrebu kao konstante NodeFilter objekt.

Na primjer, ako je NodeFilter.SHOW_TEXT konstanta dodaje se kao drugi parametar i vraća iterator za popis svih čvorova teksta ispod korijenskog čvora. NodeFilter.SHOW_ELEMENT će se vratiti samo čvorovi elemenata. Pogledajte cijeli popis sve dostupne konstante.

Treći argument (prilagođeni filtar) je a funkcija koja implementira filtar.

Ovdje je primjer isječka koda:

        
titula
 
 ovo je stranica omot 
zdravo
 
Kako si?
 
 txt neki link    

Pod pretpostavkom da želimo izdvojiti sadržaj svih tekstualnih čvorova koji se nalaze unutar #omot div, to je način na koji to koristimo NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); while (nodeIterator.nextNode ()) konzole.log (nodeIterator.referenceNode.nodeValue.trim ());  / * izlaz konzole [Log] ovo je stranica omot [Log] Hello [Log] [Log] Kako ste? [Log] * / 

nextNode () metoda NodeIterator API vraća sljedeći čvor na popisu iterabilnih tekstualnih čvorova. Kada ga koristimo u a dok petlje za pristup svakom čvoru na popisu, prijavljujemo obrezani sadržaj svakog tekstualnog čvora u konzolu. referenceNode vlasništvo NodeIterator vraća čvor kojem je trenutačno pridružen iterator.

Kao što možete vidjeti u izlazu, postoje neki tekstualni čvorovi sa samo praznim prostorom za njihov sadržaj. Možemo izbjegavajte prikazivanje tih praznih sadržaja pomoću prilagođenog filtra:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, funkcija (čvor) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); while (nodeIterator.nextNode ()) konzole.log (nodeIterator.referenceNode.nodeValue.trim ());  / * izlaz konzole [Log] ovo je stranica omotnica [Log] Hello [Log] Kako ste? * / 

Funkcija prilagođenog filtra vraća konstantu NodeFilter.FILTER_ACCEPTako čvor teksta nije prazan, što dovodi do uključivanja tog čvora u popis čvorova koje će iterator proći. Nasuprot tome NodeFilter.FILTER_REJECT konstanta se vraća kako bi isključiti prazne čvorove teksta iz iterabilnog popisa čvorova.

Kako koristiti TreeWalker API

Kao što sam već spomenuo NodeIterator i TreeWalker API-ji su slične jedna drugoj.

TreeWalker može se izraditi pomoću createTreeWalker () metoda dokument sučelje. Ova metoda, baš kao createNodeFilter (), uzima tri argumenta: korijenski čvor, unaprijed definirani filtar i prilagođeni filtar.

Ako mi koristiti TreeWalker API umjesto NodeIterator prethodni isječak koda izgleda ovako:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, funkcija (čvor) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); while (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * output [Log] ovo je stranica omotnica [Log] Hello [Log] Kako ste? * / 

Umjesto referenceNode, currentNode vlasništvo TreeWalker API je korišten pristupite čvoru na koji je trenutno priključen iterator. Uz to nextNode () način, Treewalker ima druge korisne metode. previousNode () metoda (također prisutna u NodeIterator) vraća prethodni čvor čvora u kojem je iterator trenutno usidren.

Sličnu funkcionalnost obavlja i parentNode (), firstChild (), zadnje dijete(), previousSibling (), i nextSibling () metode. Ove metode su dostupno samo u TreeWalker API.

Evo primjera koda izlazi zadnje dijete čvora iterator je usidren u:

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

Koji API odabrati

Odaberi NodeIterator API, kada trebate samo jednostavan iterator za filtriranje i provlačenje kroz odabrane čvorove. I, odaberite TreeWalker API, kada trebate pristupiti obitelji filtriranih čvorova, kao što su njihovi brati i sestre.