Le DOM est une interface de programmation standardisée (API) qui représente le contenu, la structure et le style d’un document HTML ou XML sous la forme d’un arbre d’objets manipulables — principalement via JavaScript.
C’est une représentation dynamique, en mémoire, de la page web rendue, indépendante du code source initial.
Structure du DOM : un arbre vivant
- La racine est l’objet
document(qui contient<html>). - Chaque balise, attribut, texte ou commentaire devient un nœud (node) :
- Éléments →
Element - Texte →
Text - Attributs →
Attr(dans les anciennes versions)
- Éléments →
- Les relations parent/enfant/frère permettent de naviguer et modifier la page en temps réel.
Le DOM peut divorger du HTML source (ex. : via innerHTML, appendChild, ou les frameworks comme React).
C’est le DOM réel (pas le HTML) que le navigateur affiche et que JavaScript manipule.
À quoi sert le DOM ?
- Permettre à JavaScript de :
- Lire le contenu (
document.getElementById('titre').textContent), - Modifier la structure (
element.appendChild(nouvelÉlément)), - Réagir aux interactions (
addEventListener('click', …)), - Modifier le style (
element.style.color = 'red').
- Lire le contenu (
- Servir de pont entre le moteur de rendu du navigateur et la logique applicative.
DOM vs BOM : la distinction essentielle
| DOM | BOM (Browser Object Model) | |
|---|---|---|
| Portée | Le document (HTML/XML) | Tout le navigateur |
| Objet racine | document | window |
| Standard | W3C / WHATWG | Pas standardisé (historiquement) |
| Contenu | Éléments de la page | window, navigator, location, history, screen, localStorage… |
| Exemple | document.querySelector('h1') | window.alert(), navigator.userAgent |
Le DOM est une partie du BOM, mais pas l’inverse.
Performance : combien d’éléments DOM ?
Un DOM trop volumineux ralentit :
- le rendu initial,
- les calculs de style,
- les requêtes JavaScript (ex. :
querySelectorAll), - la mémoire utilisée.
Recommandations des experts :
- Google (Web Vitals) : < 1 500 nœuds au total
- Dareboost : < 1 000 éléments
- Yahoo (YSlow) : < 700 éléments pour une expérience fluide
- Bon compromis réaliste : 800–1 200 nœuds, avec une profondeur d’arbre < 32 niveaux
Astuce : utilisez l’Inspecteur > Onglet Performance ou Lighthouse pour mesurer la taille du DOM.
Voir aussi DOM virtuel
Explorer les thématiques : Concepts et fondamentaux du numérique