So filtern und durchqueren Sie den DOM-Baum mit JavaScript

Wussten Sie, dass es eine JavaScript-API gibt, deren einzige Aufgabe darin besteht, die gewünschten Knoten aus einer DOM- Struktur herauszufiltern und zu durchlaufen ? In der Tat gibt es nicht eine, aber es gibt zwei solche APIs: NodeIterator und TreeWalker . Sie sind einander ziemlich ähnlich, mit einigen nützlichen Unterschieden. Beide können eine Liste von Knoten zurückgeben, die unter einem gegebenen Stammknoten vorhanden sind, während sie allen vordefinierten und / oder benutzerdefinierten Filterregeln entsprechen, die auf sie angewendet werden.

Die vordefinierten Filter, die in den APIs zur Verfügung stehen, können uns dabei helfen, verschiedene Arten von Knoten wie Textknoten oder Elementknoten anzusprechen, und benutzerdefinierte Filter (die von uns hinzugefügt wurden) können die Gruppe weiter filtern, indem sie beispielsweise nach Knoten mit bestimmten Inhalten suchen. Die zurückgegebene Liste der Knoten ist iterierbar, dh sie können durchlaufen werden, und wir können mit allen einzelnen Knoten in der Liste arbeiten.

Wie verwende NodeIterator die NodeIterator API NodeIterator

Ein NodeIterator Objekt kann mit der Methode createNodeIterator() der document werden. Diese Methode benötigt drei Argumente . Der erste wird benötigt; Es ist der Wurzelknoten, der alle Knoten enthält, die wir herausfiltern wollen.

Das zweite und dritte Argument sind optional . Dies sind die vordefinierten und benutzerdefinierten Filter . Die vordefinierten Filter stehen zur Verwendung als Konstanten des NodeFilter Objekts zur Verfügung .

Wenn beispielsweise die NodeFilter.SHOW_TEXT Konstante als zweiter Parameter hinzugefügt wird, gibt sie einen Iterator für eine Liste aller NodeFilter.SHOW_TEXT dem NodeFilter.SHOW_TEXT . NodeFilter.SHOW_ELEMENT gibt nur die Elementknoten zurück . Sehen Sie sich eine vollständige Liste aller verfügbaren Konstanten an .

Das dritte Argument (der benutzerdefinierte Filter) ist eine Funktion, die den Filter implementiert .

Hier ist ein Beispiel Code-Snippet :

 Titel 
 Dies ist der Seitenumbruch 
Hallo
Wie geht es dir?
 txt  

Angenommen, wir wollen den Inhalt aller #wrapper, die sich im #wrapper div befinden, #wrapper So gehen wir mit NodeIterator :

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); while (nodeIterator.nextNode ()) {console.log (nodeIterator.referenceNode.nodeValue.trim ()); } / * console output [Log] das ist der Seitenwrapper [Log] Hallo [Log] [Log] Wie geht es dir? [Protokoll] * / 

Die Methode nextNode() der NodeIterator API gibt den nächsten Knoten in der Liste der iterierbaren NodeIterator zurück . Wenn wir es in einer while Schleife verwenden, um auf jeden Knoten in der Liste zuzugreifen, protokollieren wir den getrimmten Inhalt jedes Textknotens in der Konsole. Die referenceNode Eigenschaft von NodeIterator gibt den Knoten zurück, an den der Iterator derzeit angehängt ist .

Wie Sie in der Ausgabe sehen können, gibt es einige Textknoten mit nur leeren Leerzeichen für ihren Inhalt. Wir können vermeiden, dass diese leeren Inhalte mit einem benutzerdefinierten Filter angezeigt werden :

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, Funktion (node) {return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;}); while (nodeIterator.nextNode ()) {console.log (nodeIterator.referenceNode.nodeValue.trim ()); } / * Konsolenausgabe [Log] Dies ist der Seitenwrapper [Log] Hallo [Log] Wie geht es dir? * / 

Die benutzerdefinierte Filterfunktion gibt die Konstante NodeFilter.FILTER_ACCEPT wenn der NodeFilter.FILTER_ACCEPT nicht leer ist, was zur Aufnahme dieses Knotens in die Liste der Knoten führt, über die der Iterator iterieren wird. Im Gegensatz dazu wird die NodeFilter.FILTER_REJECT Konstante zurückgegeben, um die leeren NodeFilter.FILTER_REJECT von der iterierbaren NodeFilter.FILTER_REJECT auszuschließen .

Wie benutze TreeWalker die TreeWalker API TreeWalker

Wie bereits erwähnt, sind die NodeIterator und TreeWalker APIs einander ähnlich .

TreeWalker kann mit der Methode createTreeWalker() der document werden. Diese Methode benötigt wie createNodeFilter() drei Argumente : den Root-Knoten, einen vordefinierten Filter und einen benutzerdefinierten Filter .

Wenn wir die TreeWalker API anstelle von NodeIterator verwenden, sieht das vorherige Code-Snippet folgendermaßen aus:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, Funktion (Knoten) {return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;}); while (treeWalker.nextNode ()) {console.log (treeWalker.currentNode.nodeValue.trim ()); } / * Ausgabe [Log] Dies ist die Seite Wrapper [Log] Hallo [Log] Wie geht es dir? * / 

Anstelle von referenceNode wird mit der currentNode Eigenschaft der TreeWalker API auf den Knoten TreeWalker an den der Iterator derzeit angehängt ist . Neben der nextNode() -Methode bietet Treewalker weitere nützliche Methoden. Die Methode previousNode() (ebenfalls in NodeIterator ) gibt den vorherigen Knoten des Knotens zurück, an dem der Iterator derzeit verankert ist.

Ähnliche Funktionen werden von den parentNode(), firstChild(), lastChild(), previousSibling() und nextSibling() . Diese Methoden sind nur in der TreeWalker API verfügbar .

Hier ist ein Codebeispiel, das das letzte Kind des Knotens ausgibt, an dem der Iterator verankert ist:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * Ausgabe [Protokoll] 
Wie geht es dir?
* / 

Welche API soll gewählt werden?

Wählen Sie die NodeIterator API, wenn Sie nur einen einfachen Iterator zum Filtern und Durchlaufen der ausgewählten Knoten benötigen . Und wählen Sie die TreeWalker API aus, wenn Sie auf die Familie der gefilterten Knoten zugreifen müssen, z. B. ihre unmittelbaren Geschwister.

30 auffallende Blitz-Fotos

Du weißt, wie sie sagen, dass der Blitz niemals zweimal am selben Ort auftrifft? Nun, "sie" haben gelogen. Ein Blitz kann oft an derselben Stelle oder in derselben Gegend auftreffen - tatsächlich gibt es in Venezuela einen Ort, der Leuchtturm von Catatumbo genannt wird, wo 1, 2 Millionen Mal im Jahr Blitze auftreten - denn wie kann man sonst so tolle Bilder von Blitzschlägen finden?Un

(Tech- und Design-Tipps)

Durchsuchen Sie die Geschichte Ihrer bevorzugten Websites mit UX Timeline

Internetnutzer, die seit Jahren online sind, lieben häufig die Nostalgie, die Uhr zurück zu drehen, um Websites anzusehen, wie sie einmal waren. Dies ist eine unterhaltsame Art, Zeit zu verlieren und das Wachstum von Webdesign im Laufe der Jahre zu studieren .Ich liebe es immer, die Wayback Machine zu durchstöbern, aber es ist so ein Schmerz. D

(Tech- und Design-Tipps)