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 :

 Titre 
 c'est l'enveloppe de la page 
Bonjour
Comment allez-vous?
 txt  

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.

20 supports d'ordinateurs portables pour les nomades numériques et les pigistes

Si vous êtes toujours en déplacement, vous travaillez probablement beaucoup avec votre ordinateur portable sur vos genoux. Après un certain temps, vous ressentez une pression sur vos poignets et votre cou - parce que ce n'est pas la bonne position pour travailler pendant de longues périodes . De

(Conseils techniques et de conception)

La bataille des scripts de construction: Gulp Vs Grunt

J'ai déjà écrit sur la façon de commencer avec Gulp ainsi que sur la façon de démarrer avec Grunt. Ils automatisent tous deux nos tâches, ils utilisent tous les deux Node, et tous les deux vous demandent de créer des tâches et d'installer des plugins . Mais vous interrogez-vous sur la différence entre les deux, ou même, ce qui est mieux?Dans cet a

(Conseils techniques et de conception)