Hoe te filteren en de DOM-boom met JavaScript doorkruisen

Wist u dat er een JavaScript-API bestaat waarvan de enige missie is om uit te filteren en te herhalen via de knooppunten die we van een DOM-structuur willen? In feite zijn er niet één, maar er zijn twee van dergelijke API's: NodeIterator en TreeWalker . Ze lijken erg op elkaar, met enkele bruikbare verschillen. Beiden kunnen een lijst met knooppunten die aanwezig zijn onder een bepaald wortelknooppunt retourneren terwijl ze voldoen aan vooraf ingestelde en / of aangepaste filterregels die op hen zijn toegepast.

De vooraf gedefinieerde filters die beschikbaar zijn in de API's kunnen ons helpen verschillende soorten knooppunten, zoals tekstknooppunten of elementknooppunten, te targeten, en aangepaste filters (door ons toegevoegd) kunnen de groep verder filteren, bijvoorbeeld door te zoeken naar knooppunten met specifieke inhoud. De geretourneerde lijst met knooppunten is iterabel, dat wil zeggen dat ze kunnen worden doorgelust en we kunnen werken met alle afzonderlijke knooppunten in de lijst.

Hoe de NodeIterator API te gebruiken

Een NodeIterator object kan worden gemaakt met de methode createNodeIterator() van de document . Deze methode neemt drie argumenten . De eerste is vereist; het is het basisknooppunt dat alle knooppunten bevat die we willen filteren.

Het tweede en derde argument zijn optioneel . Dit zijn de vooraf gedefinieerde en aangepaste filters, respectievelijk. De vooraf gedefinieerde filters zijn beschikbaar voor gebruik als constanten van het NodeFilter object .

Als de constante NodeFilter.SHOW_TEXT wordt toegevoegd als de tweede parameter, wordt bijvoorbeeld een iterator geretourneerd voor een lijst met alle NodeFilter.SHOW_TEXT onder het basisknooppunt . NodeFilter.SHOW_ELEMENT retourneert alleen de elementknooppunten . Bekijk een volledige lijst met alle beschikbare constanten .

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

Hier is een voorbeeld van een codefragment :

 titel 
 dit is de paginavuller 
Hallo
Hoe gaat het met je?
 txt  

Ervan uitgaande dat we de inhoud van alle #wrapper in de #wrapper div willen extraheren, doen we dit met 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 methode nextNode() van de NodeIterator API retourneert het volgende knooppunt in de lijst met itereerbare tekstknooppunten . Wanneer we het in een while lus gebruiken om toegang te krijgen tot elk knooppunt in de lijst, loggen we de ingekorte inhoud van elk tekstknooppunt in de console. De eigenschap referenceNode van NodeIterator retourneert het knooppunt NodeIterator de iterator momenteel is gekoppeld .

Zoals je kunt zien in de uitvoer, zijn er enkele tekstknooppunten met alleen lege spaties voor hun inhoud. We kunnen voorkomen dat deze lege inhoud wordt weergegeven 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 retourneert de constante NodeFilter.FILTER_ACCEPT als het NodeFilter.FILTER_ACCEPT niet leeg is, wat leidt tot de opname van dat knooppunt in de lijst met knooppunten waarop de iterator wordt herhaald. In tegendeel, de constante NodeFilter.FILTER_REJECT wordt geretourneerd om de lege tekstknooppunten uit te sluiten van de iterabele lijst met knooppunten.

Hoe de TreeWalker API te gebruiken

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

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

Als we de TreeWalker API gebruiken in plaats van NodeIterator het vorige codefragment 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 paginaomslag [Logboek] Hallo [Logboek] Hoe gaat het? * / 

In plaats van referenceNode wordt de currentNode eigenschap van de TreeWalker API gebruikt om toegang te krijgen tot het knooppunt waaraan de iterator momenteel is gekoppeld . Naast de methode nextNode() heeft Treewalker nog andere handige methoden. De methode previousNode() (ook aanwezig in NodeIterator ) retourneert het vorige knooppunt van het knooppunt waarop de iterator momenteel is verankerd.

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

Hier is een codevoorbeeld dat het laatste kind van het knooppunt uitvoert waarop de iterator is verankerd:

 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 u slechts een eenvoudige iterator nodig hebt om de geselecteerde knooppunten te filteren en door te lussen. En kies de TreeWalker API als u toegang moet hebben tot de familie van de gefilterde knooppunten, zoals hun directe broers of zussen.

Financiering van uw bedrijf: zelffinanciering versus het vinden van investeerders

Een van de grootste problemen bij het opstarten van een eigen bedrijf is hoe te beginnen en financieel financieel te blijven. Er zijn in essentie twee manieren om dit te doen: financier het bedrijf zelf of laat investeerders het voor je financieren .Veel startende ondernemers zijn van mening dat het verstandig is om beleggers te interesseren voor uw project, in plaats van er zelf geld in te steken

(Technische en ontwerptips)

Ontwikkelaar: debug DOM-elementen op uw pagina met één regel code

Hoe vaak heb je moeite om een specifiek probleem te vinden dat je CSS-lay-out in de war schopt? Van ontbrekende sluitingslabels tot onjuist genestelde broers en zussen, zijn CSS-problemen een dertien in een dozijn. En met deze CSS-lay-out-debugger is het proces nu een stuk eenvoudiger geworden .Deze ene regel code doorloopt de DOM en geeft een overzicht van elk element met een andere kleur

(Technische en ontwerptips)