# DOM

> Représentation en mémoire, sous forme d'arbre d'objets, de la page HTML chargée dans le navigateur, que JavaScript peut lire et modifier pour changer ce qui s'affiche à l'écran.

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

Le code source HTML envoyé par le serveur n'est qu'un point de départ : dès qu'un navigateur le charge, il le transforme en une structure vivante en mémoire, le DOM (Document Object Model), où chaque balise devient un objet manipulable. C'est cette représentation, pas le fichier HTML d'origine, que JavaScript lit et modifie pour changer dynamiquement ce qui s'affiche, sans recharger la page.

## Le DOM manipulé par WordPress

Une bonne partie des interactions front-end d'un site WordPress passe par une manipulation du DOM : un script qui ouvre un menu mobile, affiche une info-bulle, ou met à jour un compteur de panier après un ajout AJAX. L'éditeur de blocs, lui, ne manipule presque jamais le DOM directement à la main : React s'en charge à sa place, en comparant l'état voulu à l'état actuel du DOM pour n'appliquer que les changements nécessaires.

## Exemple

```
const bouton = document.querySelector( '.mon-bouton' );
bouton.addEventListener( 'click', () => {
  document.querySelector( '.menu' ).classList.toggle( 'ouvert' );
});
```

## Bon à savoir

- Manipuler le DOM directement (sans passer par un framework) reste parfaitement valable pour de petites interactions ; un framework réactif n'est nécessaire qu'à partir d'une certaine complexité d'état à gérer.
- Chaque manipulation du DOM a un coût de calcul pour le navigateur : multiplier les modifications une par une, plutôt que les regrouper, peut ralentir perceptiblement une page riche en interactions.
- Le DOM n'est pas le code source HTML : inspecter le DOM via les outils de développement montre la page après toutes les modifications JavaScript, qui peut différer nettement du fichier HTML d'origine.