# Arbre DOM

> Représentation hiérarchique en mémoire d'une page HTML, où chaque balise devient un nœud relié à ses parents et enfants, manipulable par JavaScript.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/arbre-dom/

Un navigateur ne garde pas le fichier HTML sous forme de texte une fois la page chargée : il le transforme en une structure d'objets imbriqués, un peu comme un organigramme, où chaque élément connaît sa position exacte par rapport aux autres.

## Comment WordPress s'appuie dessus

L'éditeur de blocs de WordPress manipule en réalité cette structure côté navigateur : chaque bloc correspond à une portion de cet arbre, et les scripts de l'éditeur naviguent dedans avec des méthodes JavaScript comme `document.querySelector()` pour lire ou modifier le contenu affiché.

```
const titre = document.querySelector( '.wp-block-post-title' );
console.log( titre.textContent );
```

Ce même mécanisme explique pourquoi un thème peut cibler visuellement une balise précise en CSS grâce à sa position dans cette hiérarchie, par exemple avec un sélecteur comme `article > p:first-child`.

## Bon à savoir

- Le code source HTML envoyé par le serveur et cet arbre en mémoire peuvent diverger : un script exécuté après le chargement peut ajouter, déplacer ou supprimer des nœuds sans que le fichier d'origine change.
- Les outils de développement d'un navigateur (onglet « Éléments ») affichent cet arbre tel qu'il existe à l'instant présent, pas le fichier HTML original.
- Chaque nœud de cet arbre expose des propriétés comme `parentNode` ou `children`, qui permettent de remonter ou descendre dans la hiérarchie sans connaître à l'avance la structure exacte du document.
- Reconstruire cet arbre entier après chaque petite modification coûterait cher en performance : les navigateurs optimisent ce travail en ne recalculant que les portions réellement affectées par un changement.