So filtern und durchsuchen Sie den DOM-Baum mit JavaScript

Wussten Sie, dass es eine JavaScript-API gibt, deren einzige Aufgabe es ist filtern und iterieren Sie durch die Knoten wollen wir von einem DOM-Baum? In der Tat gibt es nicht eine, sondern zwei solche APIs: NodeIterator und Baumwanderer. Sie sind sich ziemlich ähnlich, mit einigen nützlichen Unterschieden. Beide können Gibt eine Liste von Knoten zurück die unter einem gegebenen Wurzelknoten vorhanden sind, während alle vordefinierten und / oder benutzerdefinierten Filterregeln auf sie angewendet.

Die vordefinierten Filter, die in den APIs verfügbar sind, können uns dabei helfen ziele auf verschiedene Arten von Knoten B. Textknoten oder Elementknoten, und benutzerdefinierte Filter (von uns hinzugefügt) können filtern Sie das Bündel weiter, Zum Beispiel durch Suchen nach Knoten mit bestimmten Inhalten. Die zurückgegebene Liste der Knoten lautet iterable, das können sie sein durchgeschleift, und wir können mit allen einzelnen Knoten in der Liste arbeiten.

Wie benutze ich die NodeIterator API

EIN NodeIterator Objekt kann mit dem erstellt werden createNodeIterator () Methode der dokumentieren Schnittstelle. Diese Methode braucht drei Argumente. Der erste ist erforderlich; es”s die Wurzelknoten das enthält alle Knoten, die wir herausfiltern möchten.

Das zweite und das dritte Argument sind wahlweise. Sie sind die vordefinierte und benutzerdefinierte Filter, beziehungsweise. Die vordefinierten Filter stehen als zur Verfügung Konstanten der NodeFilter Objekt.

Zum Beispiel, wenn die NodeFilter.SHOW_TEXT Konstante wird als zweiter Parameter hinzugefügt, und es wird ein Iterator für a zurückgegeben Liste aller Textknoten unter dem Wurzelknoten. NodeFilter.SHOW_ELEMENT wird zurückkehren nur die Elementknoten. Sehen Sie eine vollständige Liste von alle verfügbaren Konstanten.

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

Hier ist ein Beispiel-Code-Snippet:

        
Titel
 
 Dies ist der Seitenumbruch 
Hallo
 
Wie geht es Ihnen?
 
 TXT irgendein Link    

Angenommen, wir wollen Extrahieren Sie den Inhalt aller Textknoten, die sich in der #Verpackung div, So gehen wir damit um 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] Dies ist der Seitenwrapper [Log] Hallo [Log] [Log] Wie geht es Ihnen? [Log] * / 

Das nextNode () Methode der NodeIterator API gibt den nächsten Knoten in der Liste der iterierbaren Textknoten zurück. Wenn wir es in einem verwenden während Um auf jeden Knoten in der Liste zuzugreifen, protokollieren wir den zugeschnittenen Inhalt jedes Textknotens in der Konsole. Das referenceNode Eigentum von NodeIterator gibt den Knoten zurück, an den der Iterator aktuell angeschlossen ist.

Wie Sie in der Ausgabe sehen können, gibt es einige Textknoten, deren Inhalt nur Leerzeichen enthält. Wir können Vermeiden Sie es, diese leeren Inhalte mithilfe eines benutzerdefinierten Filters anzuzeigen:

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

Die benutzerdefinierte Filterfunktion gibt die Konstante zurück NodeFilter.FILTER_ACCEPTwenn der Textknoten nicht leer ist, Dies führt zur Aufnahme dieses Knotens in die Liste der Knoten, über die der Iterator iteriert. Im Gegensatz dazu die NodeFilter.FILTER_REJECT Konstante wird zurückgegeben, um schließen Sie die leeren Textknoten aus aus der iterierbaren Liste der Knoten.

Wie benutze ich die Baumwanderer API

Wie ich schon sagte, die NodeIterator und Baumwanderer APIs sind sich ähneln.

Baumwanderer kann mit dem erstellt werden createTreeWalker () Methode der dokumentieren Schnittstelle. Diese Methode, genau wie createNodeFilter (), braucht drei Argumente: den Wurzelknoten, einen vordefinierten Filter und einen benutzerdefinierten Filter.

Wenn wir benutze die Baumwanderer API statt NodeIterator Das vorherige Code-Snippet sieht wie folgt 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 ());  / * output [Log] Dies ist der Seitenwrapper [Log] Hallo [Log] Wie geht es Ihnen? * / 

Anstatt referenceNode, das currentNode Eigentum der Baumwanderer API ist es gewohnt Zugriff auf den Knoten, an den der Iterator derzeit angeschlossen ist. In Ergänzung zu nextNode () Methode, Treewalker hat andere nützliche Methoden. Das previousNode () Methode (auch vorhanden in NodeIterator) gibt den vorherigen Knoten zurück des Knotens, an dem der Iterator derzeit verankert ist.

Eine ähnliche Funktionalität übernimmt der Elternknoten(), erstes Kind(), letztes Kind(), previousSibling (), und nextSibling () Methoden. Diese Methoden sind nur in der Baumwanderer API.

Hier ist ein Codebeispiel dafür gibt das letzte Kind des Knotens aus Der Iterator ist verankert an:

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

Welche API soll gewählt werden?

Wählen Sie das NodeIterator API, wenn Sie Ich brauche nur einen einfachen Iterator die ausgewählten Knoten filtern und durchlaufen. Und wähle das aus Baumwanderer API, wenn Sie müssen auf die Familie der gefilterten Knoten zugreifen, wie ihre unmittelbaren Geschwister.