À retenir
- C'est le pont indispensable entre le code HTML statique et l'interactivité JavaScript.
- Il est organisé de manière hiérarchique, avec des relations parents-enfants entre les éléments.
- Toute modification du DOM est immédiatement répercutée visuellement dans le navigateur.
Le DOM est une représentation vivante et structurée d'une page web sous forme d'arbre, générée par le navigateur. C'est l'interface qui permet à des scripts, comme JavaScript, de lire et de modifier dynamiquement le contenu, le style ou la structure d'une page sans avoir à la recharger. Analogie : si une page web est une maison, le DOM est son plan interactif : en modifiant le plan, vous changez instantanément la réalité de la maison (couleur d'un mur, ajout d'une fenêtre).
Étymologie
Acronyme de l'anglais Document Object Model (Modèle Objet de Document). Le terme « Document » désigne le fichier HTML, « Object » indique que chaque élément (titre, image, paragraphe) est traité comme une entité informatique manipulable, et « Model » définit la structure organisée. Il a été standardisé par le W3C à partir de 1998 pour mettre fin aux méthodes de programmation propriétaires et divergentes des navigateurs de l'époque.
Exemples d'usage
- Modifier le texte d'un bouton après qu'un utilisateur a cliqué dessus.
- Ajouter dynamiquement une ligne dans un tableau de résultats sans rafraîchir la page.
- Masquer ou afficher un menu de navigation sur mobile.
Cas d'usage
Le DOM intervient principalement dans le développement web front-end pour créer de l'interactivité. Il est également utilisé dans les tests automatisés pour vérifier la présence d'éléments à l'écran, ou encore dans le web scraping pour extraire des informations précises d'un site internet.
Bonnes pratiques
La manipulation directe du DOM est coûteuse en ressources pour le navigateur. Il est recommandé de limiter les modifications répétitives à l'intérieur de boucles complexes. Les frameworks modernes (comme React ou Vue) utilisent souvent un « DOM virtuel » pour calculer les changements à l'avance et ne mettre à jour que le strict nécessaire, optimisant ainsi les performances.
Synonymes
Antonymes
Conseil
Pour bien visualiser le DOM, ouvrez les « Outils de développement » de votre navigateur (touche F12) : l'onglet « Éléments » (ou Inspecteur) vous montre l'arbre DOM tel qu'il existe à l'instant T, avec toutes les modifications appliquées par les scripts.
Questions fréquentes
Le DOM est-il identique au code source HTML ?
Non. Le code source est le texte brut reçu par le navigateur, tandis que le DOM est la structure modifiable en temps réel qui peut évoluer après le chargement.
Est-ce un langage de programmation ?
Non, c'est une interface de programmation (API). C'est l'outil que les langages de programmation utilisent pour agir sur la page.