de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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 :

 Dokument 

Titel

Dies ist der Seitenumbruch

Hallo

Wie geht es dir?

txt
Urheberrechte

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.

So blättern Sie ausgewählte Teile Ihres YouTube-Videos

So blättern Sie ausgewählte Teile Ihres YouTube-Videos

Der YouTube-Editor bietet seit kurzem eine praktische Funktion, mit der Sie jeden Teil eines Videoframes für eine benutzerdefinierte Zeitspanne weichzeichnen können . Obwohl der YouTube-Editor früher eine einfache Möglichkeit bot, Gesichter automatisch zu verwischen, ist die Funktion zum Verschwimmen eines bestimmten Teils Ihrer Wahl in einem Video erst seit kurzem möglich.Lass

(Tech- und Design-Tipps)

So aktivieren Sie die geteilte Ansicht in OS X El Capitan

So aktivieren Sie die geteilte Ansicht in OS X El Capitan

Eines der am meisten erwarteten Features in Apples neuestem Betriebssystem, El Capitan, ist wahrscheinlich die Split-Ansicht . Mit dieser neuen Funktion können Sie sich simultan nebeneinander auf zwei Apps konzentrieren, ohne die Ablenkung anderer Apps, die Sie auf Ihrem Mac geöffnet haben.Um dies zu relativieren, können Sie:Code mit Ihrem Lieblings- Code-Editor auf der einen Seite und Vorschau auf die Änderungen im Browser auf der anderen Seite.Ode

(Tech- und Design-Tipps)