Document Object Model (DOM) : Définition, Tree, Manipulation
Le DOM est la représentation tree du navigateur d'un document HTML. JavaScript lit et manipule le DOM pour mettre à jour les pages dynamiquement.
Qu'est-ce que le Document Object Model (DOM) ?
Le Document Object Model (DOM) est la représentation in-memory du navigateur d'un document HTML (ou XML), structurée comme un tree de nodes. Chaque élément HTML, attribut et morceau de texte devient un node. JavaScript utilise l'API DOM pour lire la structure, la modifier et répondre aux événements utilisateur — c'est ainsi que les pages web dynamiques fonctionnent.
Le DOM est un standard W3C, implémenté par chaque navigateur.
Le DOM tree
<!DOCTYPE html>
<html>
<body>
<h1 id="title">Welcome</h1>
<p class="intro">Hi there!</p>
</body>
</html>Devient un tree :
document
└── html
└── body
├── h1#title → "Welcome"
└── p.intro → "Hi there!"Opérations DOM courantes
Sélectionner éléments
document.getElementById('title');
document.querySelector('.intro');
document.querySelectorAll('p');Lire contenu
const title = document.getElementById('title');
console.log(title.textContent);
console.log(title.innerHTML);Modifier contenu
title.textContent = 'Hello, world';
title.classList.add('highlighted');
title.setAttribute('data-id', '42');Créer + insérer éléments
const newP = document.createElement('p');
newP.textContent = 'New paragraph';
document.body.appendChild(newP);Retirer éléments
document.querySelector('.intro').remove();Gestion événements
document.getElementById('btn').addEventListener('click', (event) => {
console.log('Clicked!');
});Types node DOM
| Type | Description |
|---|---|
| Element | Éléments HTML |
| Text | Contenu texte dans éléments |
| Comment | Commentaires HTML |
| Document | Le document racine |
| DocumentFragment | Container lightweight pour building off-DOM |
| Attribute | Attributs élément |
Performance : opérations DOM sont coûteuses
- Batcher changements DOM.
- Utiliser DocumentFragment.
- Read then write.
- CSS transforms pour animation.
- Virtualiser listes longues.
- Debounce/throttle event handlers.
Virtual DOM (React, Vue) vs real DOM
Les frameworks comme React maintiennent un "virtual DOM". Quand state change, compute nouveau virtual DOM, diff contre précédent et applique changements minimaux au real DOM.
Événements DOM
| Événement | Triggered par |
|---|---|
click | Click souris |
input / change | Updates form field |
submit | Submission form |
keydown / keyup | Interaction clavier |
scroll | Scrolling |
resize | Resize fenêtre |
load / DOMContentLoaded | Chargement page |
Best practices DOM
- Cacher lookups DOM.
- Utiliser event delegation.
- Préférer textContent sur innerHTML.
- Classes, pas inline styles.
- requestAnimationFrame pour updates visuels.
- Disconnect observers.
- Éviter forced synchronous layout.
Pièges DOM courants
- innerHTML avec input utilisateur.
- Layout thrashing.
- Memory leaks.
- Beaucoup de petits updates DOM.
- Listener sur chaque child.
- document.write.
- DOM synchrone dans scroll handler.
FAQ : Document Object Model
Le DOM est-il la même chose que HTML ?
Non. HTML est markup source. Le DOM est la représentation tree in-memory.
Différence entre DOM et BOM ?
DOM = tree document. BOM = navigateur lui-même.
Pourquoi la manipulation DOM est-elle lente ?
Les changements DOM triggent reflow + repaint.
Pourquoi React/Vue utilisent-ils virtual DOM ?
Pour minimiser les opérations real DOM coûteuses.
Qu'est-ce que le "Shadow DOM" ?
Un tree DOM encapsulé pour Web Components.
Comment je préviens XSS dans opérations DOM ?
Utiliser textContent au lieu d'innerHTML.
Qu'est-ce que MutationObserver ?
Une API pour observer les changements DOM.
Testez les performances d'app DOM-heavy avec LoadFocus
LoadFocus exécute des audits Lighthouse depuis 25+ régions. Inscrivez-vous sur loadfocus.com/signup.
Outils LoadFocus connexes
Mettez ce concept en pratique avec LoadFocus — la plateforme même qui propulse tout ce que vous venez de lire.