Document : méthode createTreeWalker() - Les API Web | MDN

Basculer la barre latérale

Thème

Automatique
Clair
Sombre

Français

Se souvenir de la langue En savoir plus

Document : méthode createTreeWalker()

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La méthode createTreeWalker() de l'interface Document crée et retourne un nouvel objet TreeWalker.

Dans cet article

Syntaxe

js
createTreeWalker(root)
createTreeWalker(root, whatToShow)
createTreeWalker(root, whatToShow, filter)

Paramètres

root

Un nœud (Node) racine de l'objet TreeWalker, qui est la valeur initiale de TreeWalker.currentNode.

whatToShow Facultatif

Un unsigned long représentant un masque de bits créé par combinaison des propriétés de constante de NodeFilter (angl.). C'est un moyen pratique de filtrer pour certains types de nœuds. Il est par défaut 0xFFFFFFFF, représentant la constante NodeFilter.SHOW_ALL.

Constante Valeur numérique Description

NodeFilter.SHOW_ALL	0xFFFFFFFF	Affiche tous les nœuds.
NodeFilter.SHOW_ATTRIBUTE	0x2	Affiche les nœuds Attr.
NodeFilter.SHOW_CDATA_SECTION	0x8	Affiche les nœuds CDATASection.
NodeFilter.SHOW_COMMENT	0x80	Affiche les nœuds Comment.
NodeFilter.SHOW_DOCUMENT	0x100	Affiche les nœuds Document.
NodeFilter.SHOW_DOCUMENT_FRAGMENT	0x400	Affiche les nœuds DocumentFragment.
NodeFilter.SHOW_DOCUMENT_TYPE	0x200	Affiche les nœuds DocumentType.
NodeFilter.SHOW_ELEMENT	0x1	Affiche les nœuds Element.
NodeFilter.SHOW_ENTITY	0x20	Héritage, qui n'est plus en vigueur.
NodeFilter.SHOW_ENTITY_REFERENCE	0x10	Héritage, qui n'est plus en vigueur.
NodeFilter.SHOW_NOTATION	0x800	Héritage, qui n'est plus en vigueur.
NodeFilter.SHOW_PROCESSING_INSTRUCTION	0x40	Affiche les nœuds ProcessingInstruction.
NodeFilter.SHOW_TEXT	0x4	Affiche les nœuds Text.

Note : La constante NodeFilter.SHOW_ATTRIBUTE n'est efficace que lorsque la racine est un nœud d'attribut. Étant donné que le parent de tout nœud Attr est toujours null, TreeWalker.nextNode() et TreeWalker.previousNode() ne retournent jamais un nœud Attr. Pour parcourir les nœuds Attr, utilisez plutôt Element.attributes.

filter Facultatif

Une fonction de rappel ou un objet avec une méthode acceptNode(), qui retourne NodeFilter.FILTER_ACCEPT, NodeFilter.FILTER_REJECT, ou NodeFilter.FILTER_SKIP. La fonction ou la méthode sera appelée pour chaque nœud de la sous-arborescence basée sur root qui est accepté comme incluse par l'indicateur whatToShow pour déterminer s'il faut ou non l'inclure dans la liste des nœuds itérables :

Si la valeur retournée est NodeFilter.FILTER_ACCEPT, ce nœud est inclus.
Si la valeur retournée est NodeFilter.FILTER_REJECT, aucun nœud de la sous-arborescence basée sur ce nœud n'est inclus.
Si la valeur retournée est NodeFilter.FILTER_SKIP, ce nœud n'est pas inclus.

Valeur de retour

Un nouvel objet TreeWalker.

Exemples

Utiliser whatToShow

Cet exemple utilise whatToShow pour transformer les contenus textuels en majuscules. Notez que les nœuds textuels des descendants de l'élément #root sont également parcourus malgré le fait qu'ils ne soient pas des nœuds enfants de l'élément #root.

HTML

html
<div id="root">
  Ceci est un nœud textuel.
  <span>Et ceci est un élément <code>span</code>.</span>
</div>

CSS

css
span {
  background-color: aqua;
}

JavaScript

js
const treeWalker = document.createTreeWalker(
  document.querySelector("#root"),
  NodeFilter.SHOW_TEXT,
);

while (treeWalker.nextNode()) {
  const node = treeWalker.currentNode;
  node.data = node.data.toUpperCase();
}

Résultat

Utiliser filter

Cet exemple utilise filter pour échapper les contenus textuels. Pour tout nœud textuel, son contenu sera échappé en utilisant encodeURI() s'il est un descendant d'un élément .escape mais pas d'un élément .no-escape.

HTML

html
<div>
  <div>
    Ceci n'est pas échappé. <span class="escape">Mais ceci est échappé.</span>
  </div>
  <div class="escape">Ceci est échappé.</div>
  <div class="no-escape">Ceci n'est pas échappé.</div>
</div>
<hr />
<div class="escape">
  <div>
    Ceci est échappé.
    <span class="no-escape">Mais ceci n'est pas échappé.</span>
  </div>
  <div class="no-escape">Ceci n'est pas échappé.</div>
</div>
<hr />
<div class="no-escape">
  <div>Ceci n'est pas échappé.</div>
  <div class="escape">Ceci n'est pas échappé.</div>
</div>

CSS

div {
  margin: 0.25em 0;
  padding: 0.25em;
}
span {
  display: inline-block;
}

css
.escape {
  border: dashed;
}
.no-escape {
  border: solid;
}

JavaScript

js
const treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  (node) =>
    node.classList.contains("no-escape")
      ? NodeFilter.FILTER_REJECT
      : node.closest(".escape")
        ? NodeFilter.FILTER_ACCEPT
        : NodeFilter.FILTER_SKIP,
);

while (treeWalker.nextNode()) {
  for (const node of treeWalker.currentNode.childNodes) {
    if (node.nodeType === Node.TEXT_NODE && /\S/.test(node.data)) {
      // Exclure les nœuds textuels ne contenant que des espaces
      node.data = encodeURI(node.data.replace(/\s+/g, " "));
    }
  }
}

L'interface associée : TreeWalker

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 9 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Document : méthode createTreeWalker()

Dans cet article

Syntaxe

Paramètres

Valeur de retour

Exemples

Utiliser whatToShow

HTML

CSS

JavaScript

Résultat

Utiliser filter

HTML

CSS

JavaScript

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN