Så här filtrerar du och spårar DOM-träd med JavaScript

Visste du att det finns ett JavaScript API vars enda uppdrag är att filtrera ut och iterera genom noderna vi vill ha från ett DOM-träd? I själva verket inte en, men det finns två sådana API: NodeIterator och TreeWalker. De är ganska lika varandra, med några användbara skillnader. Båda kan returnera en lista med noder som är närvarande under en given rotknutpunkt under överensstämmelse med alla fördefinierade och / eller anpassade filterregler tillämpas på dem.

De fördefinierade filtren som finns tillgängliga i API: erna kan hjälpa oss rikta olika typer av noder till exempel textnoder eller elementnoder och anpassade filter (tillagt av oss) kan filtrera bunten ytterligare, till exempel genom att leta efter noder med specifikt innehåll. Den returnerade listan med noder är iterable, dvs de kan vara looped genom, och vi kan arbeta med alla enskilda noder i listan.

Hur man använder NodeIterator API

en NodeIterator objekt kan skapas med hjälp av createNodeIterator () metod för dokumentera gränssnitt. Den här metoden tar tre argument. Den första är nödvändig; Det”s root node som rymmer alla noder vi vill filtrera ut.

Det andra och det tredje argumentet är valfri. De är fördefinierade och anpassade filter, respektive. De fördefinierade filtren är tillgängliga för användning som konstanter av NodeFilter objekt.

Till exempel, om NodeFilter.SHOW_TEXT konstant läggs till som den andra parametern kommer det att returnera en iterator för a lista över alla textnoder under root-noden. NodeFilter.SHOW_ELEMENT kommer att återvända endast element noden. Se en fullständig lista över alla tillgängliga konstanter.

Det tredje argumentet (det anpassade filtret) är a funktion som implementerar filtret.

Här är en exempel kodbit:

        
titel
 
 detta är sidomappen 
Hej
 
Hur mår du?
 
 Text lite länk    

Förutsatt att vi vill extrahera innehållet i alla textnoder som finns inuti #omslag div, Så här använder vi oss av det NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); medan (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsolutgång [Logga] det här är sidomappen [Logga] Hej [Logga in] [Logga] Hur är du? [Logg] * / 

De nextNode () metod för NodeIterator API returnerar nästa nod i listan över iterbara textnoder. När vi använder det i en medan loop för att komma åt varje nod i listan loggar vi in ​​det trimmade innehållet i varje textnod i konsolen. De referenceNode egendom av NodeIterator returnerar noden som iseratorn för närvarande är ansluten till.

Som du kan se i utmatningen finns det några textnoder med bara tomma mellanslag för innehållet. Vi kan Undvik att visa dessa tomma innehåll med hjälp av ett anpassat filter:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, funktion (nod) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); medan (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsolutgång [Logga] detta är sidomappen [Logga] Hej [Logga] Hur är det? * / 

Den anpassade filterfunktionen returnerar konstanten NodeFilter.FILTER_ACCEPTom textnoden inte är tom, vilket leder till införandet av den noden i listan över noder, kommer iteratorn att iterera över. I motsats till det NodeFilter.FILTER_REJECT konstant återlämnas för att utesluta de tomma textnoderna från den iterbara listan över noder.

Hur man använder TreeWalker API

Som jag nämnde tidigare, den NodeIterator och TreeWalker API: er är liknar varandra.

TreeWalker kan skapas med hjälp av createTreeWalker () metod för dokumentera gränssnitt. Denna metod, precis som createNodeFilter (), tar tre argument: rotenoden, ett fördefinierat filter och ett anpassat filter.

Om vi Använd TreeWalker API istället för NodeIterator det föregående kodstycket ser ut som följande:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, funktion (nod) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); medan (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * output [Logga] det här är sidomappen [Logga in] Hej [Logga] Hur är du? * / 

Istället för referenceNode, de currentNode egenskapen hos TreeWalker API används till få tillgång till noden som iteratorn för närvarande är ansluten till. Utöver nextNode () metod, Treewalker har andra användbara metoder. De previousNode () metod (finns även i NodeIterator) returnerar föregående nod av noden är iteratorn för närvarande förankrad till.

Liknande funktionalitet utförs av parent (), förstfödde(), sista barnet(), previousSibling (), och nextSibling () metoder. Dessa metoder är endast tillgänglig i TreeWalker API.

Här är ett kodexempel som matar ut det sista barnet i noden iteratorn är förankrad till:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * utgång [logga] 
Hur mår du?
 * / 

Vilket API ska du välja?

Välj den NodeIterator API, när du behöver bara en enkel iterator att filtrera och loop genom de valda knutpunkterna. Och plocka TreeWalker API, när du behöver komma åt familjen filtrerade noder, som deras närmaste syskon.