Comment filtrer et traverser un arbre DOM avec JavaScript

Saviez-vous qu’il existe une API JavaScript dont la seule mission est de filtrer et parcourir les nœuds nous voulons d'un arbre DOM? En fait, non pas une mais il y a deux API: NodeIterator et TreeWalker. Ils sont assez semblables les uns aux autres, avec quelques différences utiles. Les deux peuvent retourne une liste de noeuds qui sont présents sous un noeud racine donné tout en se conformant à toutes les règles de filtrage prédéfinies et / ou personnalisées appliqué à eux.

Les filtres prédéfinis disponibles dans les API peuvent nous aider cibler différents types de nœuds tels que les nœuds de texte ou les nœuds d’élément, et les filtres personnalisés (ajoutés par nous) peuvent filtrer davantage le groupe, par exemple en recherchant des nœuds avec un contenu spécifique. La liste de noeuds renvoyée est iterable, c'est-à-dire qu'ils peuvent être en boucle, et nous pouvons travailler avec tous les nœuds individuels de la liste.

Comment utiliser le NodeIterator API

UNE NodeIterator objet peut être créé en utilisant le createNodeIterator () méthode du document interface. Cette méthode prend trois arguments. Le premier est requis; il”s le Noeud principal qui contient tous les nœuds que nous voulons filtrer.

Les deuxième et troisième arguments sont optionnel. Ils sont les filtres prédéfinis et personnalisés, respectivement. Les filtres prédéfinis sont disponibles pour une utilisation en tant que les constantes du NodeFilter objet.

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

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

Voici un exemple d'extrait de code:

        
Titre
 
 c'est le wrapper de la page 
Bonjour
 
Comment vas-tu?
 
 SMS un lien    

En supposant que nous voulons extraire le contenu de tous les nœuds de texte qui se trouvent à l'intérieur du #wrapper div, voici comment nous y parvenons en utilisant NodeIterator:

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

le nextNode () méthode du NodeIterator API renvoie le prochain nœud dans la liste des nœuds de texte itérables. Quand on l'utilise dans un tandis que boucle pour accéder à chaque nœud de la liste, nous enregistrons le contenu découpé de chaque nœud de texte dans la console. le référenceNode propriété de NodeIterator renvoie le nœud auquel l'itérateur est actuellement attaché.

Comme vous pouvez le voir dans la sortie, il existe des nœuds de texte avec juste des espaces vides pour leur contenu. nous pouvons évitez d'afficher ces contenus vides à l'aide d'un filtre personnalisé:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, fonction (nœud) return (node.nodeValue.trim ()! == ")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * sortie de la console [Log] ceci est le wrapper de page [Log] Bonjour [Log] Comment allez-vous? * / 

La fonction de filtrage personnalisée renvoie la constante NodeFilter.FILTER_ACCEPTsi le noeud de texte n'est pas vide, ce qui conduit à l'inclusion de ce nœud dans la liste des nœuds sur lesquels l'itérateur effectuera une itération. Au contraire, le NodeFilter.FILTER_REJECT la constante est renvoyée pour exclure les nœuds de texte vides de la liste itérable de noeuds.

Comment utiliser le TreeWalker API

Comme je l'ai mentionné précédemment, le NodeIterator et TreeWalker Les API sont semblable à l'autre.

TreeWalker peut être créé en utilisant le createTreeWalker () méthode du document interface. Cette méthode, tout comme createNodeFilter (), prend trois arguments: le nœud racine, un filtre prédéfini et un filtre personnalisé.

Si nous Utilisez le TreeWalker API au lieu de NodeIterator L'extrait de code précédent se présente comme suit:

 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] ceci est le wrapper de page [Log] Hello [Log] Comment allez-vous? * / 

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

Une fonctionnalité similaire est réalisée par le parentNode (), premier enfant(), dernier enfant(), précédentSibling (), et nextSibling () méthodes. Ces méthodes sont disponible uniquement dans le TreeWalker API.

Voici un exemple de code qui sort le dernier enfant du noeud 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 vas-tu?
 * / 

Quelle API choisir

Choisir la NodeIterator API, quand vous besoin d'un simple itérateur pour filtrer et parcourir les nœuds sélectionnés. Et choisissez le TreeWalker API, quand vous besoin d'accéder à la famille des nœuds filtrés, tels que leurs frères et soeurs immédiats.