hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Comment filtrer et traverser l'arborescence DOM avec JavaScript

Saviez-vous qu'il existe une API JavaScript dont la seule mission est de filtrer et de parcourir les nœuds que nous voulons depuis un arbre DOM? En fait, pas un, mais il existe deux API de ce type: NodeIterator et TreeWalker . Ils sont assez similaires les uns aux autres, avec quelques différences utiles. Les deux peuvent renvoyer une liste de noeuds présents sous un noeud racine donné tout en respectant les règles de filtre prédéfinies et / ou personnalisées qui leur sont appliquées.

Les filtres prédéfinis disponibles dans les API peuvent nous aider à cibler différents types de nœuds tels que des nœuds de texte ou des nœuds d'éléments, et des filtres personnalisés (ajoutés par nous) peuvent filtrer davantage le paquet, par exemple en recherchant des nœuds avec des contenus spécifiques. La liste des nœuds renvoyés est itérable, c'est-à-dire qu'ils peuvent être bouclés, et nous pouvons travailler avec tous les nœuds individuels de la liste.

Comment utiliser l'API NodeIterator

Un objet NodeIterator peut être créé à l'aide de la méthode createNodeIterator() de l'interface de document . Cette méthode prend trois arguments . Le premier est requis; C'est le nœud racine qui contient tous les nœuds que nous voulons filtrer.

Les deuxième et troisième arguments sont facultatifs . Ce sont les filtres prédéfinis et personnalisés, respectivement. Les filtres prédéfinis sont disponibles pour utilisation en tant que constantes de l'objet NodeFilter .

Par exemple, si la constante NodeFilter.SHOW_TEXT est ajoutée en tant que deuxième paramètre, elle renvoie un itérateur pour une liste de tous les nœuds de texte sous le nœud racine . NodeFilter.SHOW_ELEMENT ne retournera que les nœuds de l'élément . Voir la liste complète de toutes les constantes disponibles .

Le troisième argument (le filtre personnalisé) est une fonction qui implémente le filtre .

Voici un exemple d'extrait de code :

 Document 

Titre

c'est l'enveloppe de la page

Bonjour

Comment allez-vous?

txt
droits d'auteur

En supposant que nous voulions extraire le contenu de tous les nœuds de texte qui sont à l'intérieur de la div #wrapper, #wrapper comment nous NodeIterator utilisant NodeIterator :

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); while (nodeIterator.nextNode ()) {console.log (nodeIterator.referenceNode.nodeValue.trim ()); } / * console sortie [Log] ceci est l'encapsuleur [Log] Bonjour [Log] [Log] Comment allez-vous? [Log] * / 

La méthode nextNode() de l'API NodeIterator renvoie le nœud suivant dans la liste des nœuds de texte itérables . Lorsque nous l'utilisons dans une boucle while pour accéder à chaque noeud de la liste, nous enregistrons le contenu découpé de chaque noeud de texte dans la console. La propriété referenceNode de NodeIterator renvoie le nœud NodeIterator l'itérateur est actuellement attaché .

Comme vous pouvez le voir dans la sortie, il y a des nœuds de texte avec juste des espaces vides pour leur contenu. Nous pouvons éviter d'afficher ces contenus vides en utilisant un filtre personnalisé :

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, fonction (noeud) {return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;}); while (nodeIterator.nextNode ()) {console.log (nodeIterator.referenceNode.nodeValue.trim ()); } / * console sortie [Log] ceci est l'encapsuleur [Log] Bonjour [Log] Comment allez-vous? * / 

La fonction de filtre personnalisé renvoie la constante NodeFilter.FILTER_ACCEPT si le nœud de texte n'est pas vide, ce qui entraîne l'inclusion de ce nœud dans la liste des nœuds que l'itérateur parcourt. À l' NodeFilter.FILTER_REJECT, la constante NodeFilter.FILTER_REJECT est renvoyée afin d' exclure les nœuds de texte vides de la liste itérative des nœuds.

Comment utiliser l'API TreeWalker

Comme je l'ai mentionné précédemment, les API NodeIterator et TreeWalker sont similaires les unes aux autres .

TreeWalker peut être créé à l'aide de la méthode createTreeWalker() de l'interface de document . Cette méthode, tout comme createNodeFilter(), prend trois arguments : le nœud racine, un filtre prédéfini et un filtre personnalisé .

Si nous utilisons l'API TreeWalker au lieu de NodeIterator l'extrait de code précédent ressemble à ceci:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, fonction (noeud) {return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;}); while (treeWalker.nextNode ()) {console.log (treeWalker.currentNode.nodeValue.trim ()); } / * output [Log] c'est le wrapper de page [Log] Bonjour [Log] Comment ça va? * / 

Au lieu de referenceNode, la propriété currentNode de l'API TreeWalker est utilisée pour accéder au nœud auquel l'itérateur est actuellement attaché . En plus de la méthode nextNode(), Treewalker a d'autres méthodes utiles. La méthode previousNode() (également présente dans NodeIterator ) renvoie le nœud précédent du nœud sur NodeIterator l'itérateur est actuellement ancré.

Une fonctionnalité similaire est effectuée par les parentNode(), firstChild(), lastChild(), previousSibling() et nextSibling() . Ces méthodes sont uniquement disponibles dans l'API TreeWalker .

Voici un exemple de code qui génère le dernier enfant du nœud sur lequel l'itérateur est ancré:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * sortie [Log] 

Comment allez-vous?

* /

Quelle API choisir

Choisissez l'API NodeIterator, lorsque vous n'avez besoin que d'un simple itérateur pour filtrer et parcourir les nœuds sélectionnés. Et, choisissez l'API TreeWalker, lorsque vous avez besoin d'accéder à la famille des nœuds filtrés, tels que leurs frères et sœurs immédiatement.

Refonte du site Web: 33 conceptions de sites Web populaires

Refonte du site Web: 33 conceptions de sites Web populaires

Tous les concepteurs n'ont pas la chance de travailler sur la conception d'une marque populaire ou de leurs sites Web. Cependant, la plupart d'entre eux ont leur propre point de vue sur Facebook, BBC, Twitter, Youtube et d'autres sites. C'est pourquoi de nombreux designers du monde entier prennent leur temps pour créer des concepts de reconception pour ces sites célèbres.Il

(Conseils techniques et de conception)

Cette photo de fraise rouge-moins brise l'Internet

Cette photo de fraise rouge-moins brise l'Internet

Internet est plein d' images qui vous donnent une perspective totalement différente si vous les regardez de près. Le célèbre art 3D et la photographie en perspective forcée sont de bons exemples. De même, une image intéressante a circulé sur Internet, déconcertant les gens quant à ses propriétés.À première

(Conseils techniques et de conception)