Ako filtrovať a presúvať strom stromu pomocou jazyka JavaScript

Vedeli ste, že existuje API jazyka JavaScript, ktorého jediným poslaním je filtrovať a prechádzať cez uzly chceme z stromu DOM? V skutočnosti nie je jeden, ale existujú dva takéto API: NodeIterator a TreeWalker. Sú navzájom veľmi podobné, s niektorými užitočnými rozdielmi. Obaja môžu vrátiť zoznam uzlov ktoré sú prítomné v danom koreňovom uzle pri dodržaní všetky preddefinované a / alebo vlastné pravidlá filtra uplatňovali na ne.

Vopred definované filtre dostupné v rozhraní API nám môžu pomôcť zamerať na rôzne druhy uzlov ako sú uzly textu alebo uzly elementov a vlastné filtre (ktoré sme pridali) ďalej filtrovať zväzok, napríklad hľadaním uzlov so špecifickým obsahom. Vrátený zoznam uzlov je iterable, t.j. môžu byť skrútené, a môžeme pracovať so všetkými jednotlivými uzlami v zozname.

Ako používať NodeIterator API

NodeIterator objekt možno vytvoriť pomocou createNodeIterator () metóda dokument rozhranie. Táto metóda má tri argumenty. Prvý sa vyžaduje; to”s koreňový uzol ktorý obsahuje všetky uzly, ktoré chceme odfiltrovať.

Druhý a tretí argument sú voliteľný. Sú to preddefinované a vlastné filtre, resp. Preddefinované filtre sú k dispozícii ako konštanty NodeFilter objekt.

Napríklad, ak NodeFilter.SHOW_TEXT konštanta sa pridá ako druhý parameter, ktorý vráti iterátor pre a zoznam všetkých uzlov textu pod koreňovým uzlom. NodeFilter.SHOW_ELEMENT vráti sa len uzly prvkov. Pozrite si úplný zoznam všetky dostupné konštanty.

Tretí argument (vlastný filter) je a ktorá implementuje filter.

Tu je napríklad útržok kódu:

        
nadpis
 
 toto je obal 
Ahoj
 
Ako sa máš?
 
 TXT nejaký odkaz    

Za predpokladu, že chceme extrahujte obsah všetkých textových uzlov, ktoré sú vnútri #wrapper div, to je spôsob, akým používame to NodeIterator:

 var div = dokument.querySelektor ('# obal'); var nodeIterator = dokument.createNodeIterátor (div, NodeFilter.SHOW_TEXT); zatiaľ čo (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * výstup na konzolu [Log] Toto je obálka stránky [Log] Dobrý deň [Log] [Log] Ako sa máš? [Log] * / 

nextNode () metóda NodeIterator API vracia ďalší uzol v zozname iterovateľných uzlov textu. Keď ju používame v a zatiaľ čo smyčky pre prístup ku každému uzlu v zozname, zaznamenáme orezaný obsah každého uzla textu do konzoly. referenceNode majetok NodeIterator vráti uzol, ku ktorému je v súčasnosti pripojený iterátor.

Ako vidíte na výstupe, existujú niektoré textové uzly s prázdnymi medzerami pre ich obsah. Môžeme vyhýbajte sa zobrazovaniu tohto prázdneho obsahu pomocou vlastného filtra:

 var div = dokument.querySelektor ('# obal'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, funkcia (uzol) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); zatiaľ čo (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsole výstup [Log] to je obal stránky [Log] Dobrý deň [Log] Ako sa máš? * / 

Vlastná funkcia filtra vráti konštantu NodeFilter.FILTER_ACCEPTak uzol nie je prázdny, čo vedie k zaradeniu tohto uzla do zoznamu uzlov, ktoré bude iterátor prepisovať. Na rozdiel od toho NodeFilter.FILTER_REJECT konštanta sa vráti, aby sa vylúčte prázdne uzly textu z opakovateľného zoznamu uzlov.

Ako používať TreeWalker API

Ako som už spomenul, NodeIterator a TreeWalker Rozhrania API sú vzájomne podobné.

TreeWalker možno vytvoriť pomocou createTreeWalker () metóda dokument rozhranie. Táto metóda, rovnako ako createNodeFilter (), má tri argumenty: koreňový uzol, preddefinovaný filter a vlastný filter.

Keby sme Použi TreeWalker API miesto NodeIterator predchádzajúci útržok kódu vyzerá takto:

 var div = dokument.querySelektor ('# obal'); var stromWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, funkcia (uzol) návrat (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); zatiaľ čo (stromWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * výstup [Log] to je obal [Log] Dobrý deň [Log] Ako sa máš? * / 

Namiesto referenceNode, currentNode majetok spoločnosti TreeWalker API sa používa na prístup k uzlu, ku ktorému je v súčasnosti pripojený iterátor. Navyše k nextNode () metóda, Treewalker má iné užitočné metódy. previousNode () metóda (tiež prítomná v NodeIterator) vráti predchádzajúci uzol uzla, do ktorého je v súčasnosti pripojený iterátor.

Podobné funkcie vykonáva spoločnosť parentNode (), firstChild (), posledné dieťa(), previousSibling (), a nextSibling () metódy. Tieto metódy sú k dispozícii iba v TreeWalker API.

Tu je príklad kódu výstup posledné dieťa uzla iterátor je ukotvený na:

 var div = dokument.querySelektor ('# obal'); var stromWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * výstup [Log] 
Ako sa máš?
 * / 

Ktorý API si vyberiete

Vyber NodeIterator API, keď vy potrebujete len jednoduchý iterátor filtrovať a prechádzať cez vybrané uzly. A vyber si TreeWalker API, keď vy potrebujete pristupovať k rodine filtrovaných uzlov, ako sú ich okamžité súrodenci.