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.

Erstellen Sie vollständig animierte Widgets mit Shift.css

Erstellen Sie vollständig animierte Widgets mit Shift.css

Webanimation bietet eine Möglichkeit, die Aufmerksamkeit der Menschen zu gewinnen und sie in eine Website einzubinden. Es gibt viele Tools, um freie Animationen zu erstellen, aber Shift.css ist eine der neuesten im Bundle .Es ist ein kostenloses Open-Source-Framework, das zum Erstellen dynamischer Animationen in jedem Container dient .

(Tech- und Design-Tipps)

Ein Blick in: Small Business Web Design für die Dienstleistungsbranche

Ein Blick in: Small Business Web Design für die Dienstleistungsbranche

Kleine Unternehmen sind die Motoren der lokalen Wirtschaft, alle mit ihren eigenen Kunden und Zielen. Das Entwerfen von Websites für sie erfordert spezifische Strategien .Heutzutage sind die meisten kleinen Unternehmen in der Dienstleistungsbranche oder mit anderen Worten im tertiären Sektor der Wirtschaft, wie Restaurants, Installateure, Schönheitstherapeuten, Anwälte und andere tätig - sie machen auch die Mehrheit der Kunden für freiberufliche Webdesigner aus.In di

(Tech- und Design-Tipps)