DOM-boom filteren en doorkruisen met JavaScript

Wist u dat er een JavaScript-API bestaat wiens enige missie het is om dit te doen filter uit en herhaal door de knooppunten we willen van een DOM-boom? In feite niet één, maar er zijn twee van dergelijke API's: NodeIterator en TreeWalker. Ze lijken erg op elkaar, met enkele bruikbare verschillen. Beide kunnen een lijst met knooppunten retourneren die aanwezig zijn onder een bepaald root-knooppunt terwijl ze worden nageleefd alle vooraf gedefinieerde en / of aangepaste filterregels toegepast op hen.

De vooraf gedefinieerde filters die beschikbaar zijn in de API's kunnen ons helpen doel verschillende soorten knooppunten zoals tekstknooppunten of elementknopen en aangepaste filters (toegevoegd door ons) kunnen filter het bos verder, bijvoorbeeld door te zoeken naar knooppunten met specifieke inhoud. De geretourneerde lijst met knooppunten is iterable, dat kunnen ze zijn doorgelust, en we kunnen werken met alle individuele knooppunten in de lijst.

Hoe de NodeIterator API

EEN NodeIterator object kan worden gemaakt met behulp van de createNodeIterator () methode van de document interface. Deze methode neemt drie argumenten. De eerste is vereist; het”s de root-knooppunt die alle knooppunten bevat die we eruit willen filteren.

Het tweede en derde argument zijn facultatief. Zij zijn de voorgedefinieerde en aangepaste filters, respectievelijk. De vooraf gedefinieerde filters zijn beschikbaar voor gebruik als constanten van de NodeFilter voorwerp.

Bijvoorbeeld, als de NodeFilter.SHOW_TEXT constante wordt toegevoegd als de tweede parameter en retourneert een iterator voor a lijst met alle tekstknooppunten onder het basisknooppunt. NodeFilter.SHOW_ELEMENT zal terugkeren alleen de elementknooppunten. Bekijk een volledige lijst met alle beschikbare constanten.

Het derde argument (het aangepaste filter) is a functie die het filter implementeert.

Hier is een voorbeeld codefragment:

        
titel
 
 dit is de pagina-omslag 
Hallo
 
Hoe gaat het met je?
 
 tekst een link    

Aangenomen dat we dat willen extraheer de inhoud van alle tekstknooppunten in de #wikkel div, dit is hoe we het doen met behulp van NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * console-uitvoer [Logboek] dit is de pagina-omslag [Logboek] Hallo [Log] [Logboek] Hoe gaat het? [Log] * / 

De nextNode () methode van de NodeIterator API geeft het volgende knooppunt terug in de lijst met iterabele tekstknooppunten. Wanneer we het gebruiken in een terwijl om toegang te krijgen tot elk knooppunt in de lijst, loggen we de ingekorte inhoud van elk tekstknooppunt in de console. De referenceNode eigendom van NodeIterator retourneert het knooppunt waaraan de iterator is gekoppeld.

Zoals je kunt zien in de uitvoer, zijn er enkele tekstknooppunten met alleen lege spaties voor hun inhoud. We kunnen vermijd het tonen van deze lege inhoud met behulp van een aangepast filter:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, function (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * console-uitvoer [Logboek] dit is de pagina-omslag [Logboek] Hallo [Logboek] Hoe gaat het? * / 

De aangepaste filterfunctie geeft de constante terug NodeFilter.FILTER_ACCEPTals het tekstknooppunt niet leeg is, wat leidt tot de opname van dat knooppunt in de lijst met knooppunten waarop de iterator wordt herhaald. In tegenstelling, de NodeFilter.FILTER_REJECT constant wordt geretourneerd om sluit de lege tekstknooppunten uit van de iterabele lijst met knooppunten.

Hoe de TreeWalker API

Zoals ik eerder al zei, de NodeIterator en TreeWalker API's zijn vergelijkbaar met elkaar.

TreeWalker kan worden gemaakt met behulp van de createTreeWalker () methode van de document interface. Deze methode, net zoals createNodeFilter (), neemt drie argumenten: het basisknooppunt, een vooraf gedefinieerd filter en een aangepast filter.

Als wij gebruik de TreeWalker API in plaats van NodeIterator het vorige codefragment ziet er als volgt uit:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, function (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); while (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * uitvoer [Logboek] dit is de pagina-omslag [Logboek] Hallo [Logboek] Hoe gaat het met u? * / 

In plaats van referenceNode, de currentNode eigendom van de TreeWalker API is gebruikt om toegang tot het knooppunt waaraan de iterator momenteel is gekoppeld. In aanvulling op de nextNode () methode, Treewalker heeft andere handige methoden. De previousNode () methode (ook aanwezig in NodeIterator) geeft het vorige knooppunt terug van het knooppunt waar de iterator momenteel aan is verankerd.

Soortgelijke functionaliteit wordt uitgevoerd door de parentNode (), eerstgeborene(), laatste kind(), previousSibling (), en nextSibling () methoden. Deze methoden zijn alleen beschikbaar in de TreeWalker API.

Hier is een codevoorbeeld dat geeft het laatste kind van het knooppunt uit de iterator is verankerd aan:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * uitvoer [Log] 
Hoe gaat het met je?
 * / 

Welke API te kiezen

Kies de NodeIterator API, wanneer jij heb alleen een eenvoudige iterator nodig om de geselecteerde knooppunten te filteren en door te lussen. En kies de TreeWalker API, wanneer jij moet toegang hebben tot de familie van de gefilterde knooppunten, zoals hun directe broers en zussen.