DOM
Traversal
Recherche…
Marche d'arbre
TreeWalker est une interface de type générateur qui permet de filtrer de manière récursive des nœuds dans un arbre DOM facile et efficace.
Le code suivant concatène la valeur de tous les nœuds Text de la page et imprime le résultat.
let parentNode = document.body;
let treeWalker = document.createTreeWalker(parentNode, NodeFilter.SHOW_TEXT);
let text = "";
while (treeWalker.nextNode())
text += treeWalker.currentNode.nodeValue;
console.log(text); // all text in the page, concatenated
La fonction .createTreeWalker a une signature de
createTreeWalker(root, whatToShow, filter, entityReferenceExpansion)
| Paramètre | Détails |
|---|---|
| racine | Le noeud 'root' qui est le sous-arbre doit être traité |
| whatToShow | Facultatif, unsigned long désignant les types de nœuds à afficher. Voir NodeFilter pour plus d'informations. |
| filtre | Facultatif, Un objet avec une méthode acceptNode pour déterminer si un nœud, après avoir passé la vérification whatToShow, doit être considéré |
| entityReferenceExpansion | Obsolète et facultatif, Indicateur booléen indiquant si, lors de la suppression d’une EntityReference, la totalité de son sous-arbre doit être supprimée en même temps. |
Itérer sur les nœuds
L'interface NodeIterator fournit des méthodes pour itérer sur des nœuds dans un arbre DOM.
Vu un document comme celui-ci:
<html>
<body>
<section class="main">
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</section>
</body>
</html>
On pourrait imaginer un itérateur pour obtenir les éléments <li> :
let root = document.body;
let whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
let filter = (node) => node.nodeName.toLowerCase() === 'li' ?
NodeFilter.FILTER_ACCEPT :
NodeFilter.FILTER_REJECT;
let iterator = document.createNodeIterator(root, whatToShow, filter);
var node;
while (node = iterator.nextNode()) {
console.log(node);
}
Exemple adapté de l'exemple fourni par les contributeurs de Mozilla à partir de la document.createNodeIterator() sur le réseau de développeurs Mozilla, sous licence CC-by-SA 2.5 .
Cela enregistrera quelque chose comme:
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
Notez que ceci est similaire à l' itère TreeWalker, mais fournit uniquement la fonctionnalité nextNode() et previousNode() .