Jak filtrovat a posouvat DOM strom s JavaScriptem

Věděli jste, že existuje JavaScript API, jehož jediným posláním je filtrovat a iterovat přes uzly chceme z DOM stromu? Ve skutečnosti ne jeden, ale existují dvě taková API: NodeIterator a TreeWalker. Jsou si navzájem podobné, s některými užitečnými rozdíly. Oba mohou vrátit seznam uzlů , které jsou přítomny v daném kořenovém uzlu při dodržení pravidla předdefinovaných a / nebo vlastních filtrů aplikovány na ně.

Předdefinované filtry dostupné v rozhraní API nám mohou pomoci cílové různé druhy uzlů například textové uzly nebo uzly prvků a vlastní filtry (přidané námi) mohou dále filtrujte svazek, například hledáním uzlů se specifickým obsahem. Vrácený seznam uzlů je iterovatelný, mohou to být smyčkou, a můžeme pracovat se všemi jednotlivými uzly v seznamu.

Jak používat NodeIterator API

A NodeIterator objekt lze vytvořit pomocí createNodeIterator () metoda dokument rozhraní. Tato metoda trvá tři argumenty. Vyžaduje se první; to”s kořenový uzel který obsahuje všechny uzly, které chceme odfiltrovat.

Druhý a třetí argument jsou volitelný. Jsou to předdefinované a vlastní filtry, resp. Předdefinované filtry jsou k dispozici pro použití jako konstanty NodeFilter objekt.

Například, pokud NodeFilter.SHOW_TEXT konstanta je přidána jako druhý parametr, který vrátí iterátor pro a seznam všech textových uzlů v kořenovém uzlu. NodeFilter.SHOW_ELEMENT vrátí se pouze uzly elementu. Podívejte se na úplný seznam všechny dostupné konstanty.

Třetí argument (vlastní filtr) je funkce, která implementuje filtr.

Tady je fragment kódu:

        
titul
 
 Toto je obálka stránky 
Ahoj
 
Jak se máš?
 
 txt nějaký odkaz    

Za předpokladu, že chceme extrahovat obsah všech textových uzlů, které jsou uvnitř #obal div, to je to, jak jdeme na to používat NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konzolový výstup [Log] Toto je stránka wrapper [Log] Dobrý den [Log] [Log] Jak se máš? [Log] * / 

nextNode () metoda NodeIterator API vrátí další uzel v seznamu iterovatelných textových uzlů. Když ho použijeme v zatímco smyčka pro přístup ke každému uzlu v seznamu, zaznamenáváme oříznutý obsah každého textového uzlu do konzoly. referenceNode majetek NodeIterator vrátí uzel, ke kterému je iterátor aktuálně připojen.

Jak vidíte na výstupu, existují některé textové uzly s prázdnými mezerami pro jejich obsah. Můžeme vyhnout se zobrazování těchto prázdných obsahů pomocí vlastního filtru:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, funkce (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konzolový výstup [Log] Toto je stránka wrapper [Log] Dobrý den [Log] Jak se máš? * / 

Funkce vlastního filtru vrátí konstantu NodeFilter.FILTER_ACCEPTPokud textový uzel není prázdný, který vede k zahrnutí tohoto uzlu do seznamu uzlů, které bude iterátor opakovat. Naopak NodeFilter.FILTER_REJECT Konstanta je vrácena, aby vyloučit prázdné textové uzly z iterovatelného seznamu uzlů.

Jak používat TreeWalker API

Jak jsem zmínil dříve, NodeIterator a TreeWalker API jsou podobné.

TreeWalker lze vytvořit pomocí createTreeWalker () metoda dokument rozhraní. Tato metoda, stejně jako createNodeFilter (), trvá tři argumenty: kořenový uzel, předdefinovaný filtr a vlastní filtr.

Kdybychom používat TreeWalker API místo NodeIterator předchozí fragment kódu vypadá takto:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, funkce (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); while (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * output [Log] Toto je stránka wrapper [Log] Dobrý den [Log] Jak se máš? * / 

Namísto referenceNode, currentNode vlastnictví TreeWalker Používá se API přístup k uzlu, ke kterému je iterátor aktuálně připojen. Navíc k nextNode () metoda, Treewalker má jiné užitečné metody. previousNode () metoda (také přítomná v. \ t NodeIterator) vrátí předchozí uzel uzlu, do kterého je iterátor momentálně ukotven.

Podobnou funkčnost provádí parentNode (), první dítě(), poslední dítě(), předchozíSibling (), a nextSibling () metody. Tyto metody jsou k dispozici pouze v TreeWalker API.

Zde je příklad kódu výstupy posledního potomka uzlu iterátor je ukotven:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * výstup [Log] 
Jak se máš?
 * / 

Které API zvolit

Vyber NodeIterator API, když vy potřebují jen jednoduchý iterátor filtrovat a smyčky přes vybrané uzly. A vybírej TreeWalker API, když vy potřebují přístup k rodině filtrovaných uzlů, sourozenci.