API DOM TreeWalker

L'API DOM TreeWalker

L'API TreeWalker permet aux développeurs de créer un objet treeWalker qui peut être utilisé pour parcourir l'arborescence DOM. Le treeWalker a un certain nombre de méthodes qui peuvent être utilisées pour déplacer la position actuelle du treeWalker dans l'arborescence DOM, ainsi que pour renvoyer des informations sur le nœud actuel.

L'API TreeWalker est un outil puissant pour parcourir l'arborescence DOM. Avec lui, vous pouvez facilement vous déplacer dans l'arborescence et obtenir des informations sur les nœuds que vous rencontrez. L'API fournit également un certain nombre de méthodes pratiques pour les opérations courantes, telles que l'obtention du frère suivant ou précédent d'un nœud, ou l'obtention du nœud parent.

Exemples d'utilisation de l'API TreeWalker

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) {
      return node.tagName === 'DIV' ?
        NodeFilter.FILTER_ACCEPT :
        NodeFilter.FILTER_SKIP;
  }},
  false
);

while(treeWalker.nextNode()) {
  console.log(treeWalker.currentNode.tagName);
}

Le code ci-dessus crée un TreeWalker, qui est ensuite utilisé pour parcourir l'arborescence DOM. Le TreeWalker n'accepte que les nœuds qui sont des éléments DIV, et il ignorera donc tout autre type de nœud. Au fur et à mesure qu'il parcourt l'arborescence, il imprime le nom de balise de chaque nœud DIV qu'il rencontre. C'est un moyen utile de trouver tous les éléments DIV dans un document.

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) {
      // Check if the node is a DIV, and if it has the "my-class" class.
      return node.tagName === 'DIV' && node.classList.contains('my-class') ?
        NodeFilter.FILTER_ACCEPT :
        NodeFilter.FILTER_SKIP;
  }},
  false
);

while(treeWalker.nextNode()) {
  // Do something with the node, such as add a border.
  treeWalker.currentNode.style.border = '1px solid black';
}

Le code ci-dessus fait la même chose que l'exemple précédent, mais n'accepte que les nœuds DIV qui ont la classe "my-class". Une fois qu'il rencontre un tel nœud, il y ajoute une bordure noire de 1px. Ceci n'est qu'un exemple simple de ce que vous pouvez faire avec l'API TreeWalker.

(Presque) tout vert

L'un des défis lors de l'utilisation de l'API TreeWalker est qu'il peut être facile de perdre la trace du nœud actuel. En effet, l'API ne fournit aucune méthode pour rechercher un nœud spécifique. Au lieu de cela, vous devez utiliser les méthodes pour vous déplacer dans l'arbre, ce qui peut être délicat. Un autre défi est que l'API n'est pas très bien prise en charge par les navigateurs, vous devrez donc peut-être utiliser un polyfill.

Sommaire

L'API TreeWalker est un outil puissant pour parcourir l'arborescence DOM. Il fournit un certain nombre de méthodes pour se déplacer dans l'arborescence, ainsi que pour obtenir des informations sur le nœud actuel. L'API fournit également des méthodes pratiques pour les opérations courantes. Cependant, l'API peut être difficile à utiliser et n'est pas bien prise en charge par les navigateurs.

D'autres API intéressantes liées à la récupération de données DOM sont les suivantes, que je pourrais couvrir à l'avenir.

• L'API de gamme DOM
• L'API DOM NodeIterator