DOM (Document Object Model) : définition, fonctionnement et usages

Le DOM, ou Document Object Model, est la représentation d’une page web sous forme d’arbre d’objets, construite par le navigateur à partir du code HTML. Il permet aux scripts, notamment JavaScript, de lire et de modifier le contenu, la structure et le style d’une page sans la recharger.

DOM : signification et définition simple

Si le code HTML est le plan d’une maison, le DOM est la maquette que le navigateur construit à partir de ce plan, et que l’on peut modifier pièce par pièce. Chaque élément de la page (un titre, un paragraphe, un bouton, une image) devient un « nœud » de cet arbre, relié à son parent et à ses enfants. Les attributs et les textes sont eux aussi représentés.

Le DOM est une interface standardisée, définie aujourd’hui par le WHATWG et implémentée par tous les navigateurs. C’est ce qui permet à un même script de fonctionner sur Chrome, Firefox, Safari ou Edge.

Comment fonctionne le DOM ?

1. Le navigateur télécharge le code HTML de la page.
2. Il l’analyse et construit l’arbre du DOM.
3. Il combine cet arbre avec les feuilles de style CSS pour afficher la page.
4. Les scripts JavaScript accèdent ensuite au DOM pour lire ou modifier des éléments, par exemple avec document.querySelector().

Exemple concret : quand vous cliquez sur « Ajouter au panier » et que le compteur passe de 2 à 3 sans rechargement, un script vient de modifier un nœud du DOM.

Le DOM dans les applications web modernes

Les frameworks front-end comme Angular, React ou Vue.js manipulent le DOM à votre place : le développeur décrit l’état de l’écran, le framework calcule les modifications nécessaires. React s’appuie par exemple sur un DOM virtuel, une copie légère en mémoire qui limite les mises à jour coûteuses de la page réelle.

Trois enjeux en découlent pour une application métier :

• Performance : des manipulations trop nombreuses ralentissent l’affichage, notamment sur les grands tableaux de données.
• Accessibilité : les lecteurs d’écran s’appuient sur la structure du DOM ; une page mal structurée leur devient illisible.
• Sécurité : insérer dans le DOM un contenu non contrôlé ouvre la porte aux attaques XSS. C’est un point systématiquement vérifié en sécurité applicative.

DOM ou HTML : quelle différence ?

Le HTML est le texte source envoyé par le serveur. Le DOM est la structure vivante que le navigateur en tire, et qui évolue au fil des actions de l’utilisateur et des scripts. C’est pourquoi « Afficher le code source » (le HTML d’origine) et l’outil « Inspecter » du navigateur (le DOM à l’instant présent) ne montrent pas toujours la même chose.

Chez Euro Tech Conseil, nos équipes front-end conçoivent des interfaces qui restent rapides, accessibles et sûres, même lorsque le DOM est fortement dynamique.

Voir aussi

• Framework JavaScript : les outils qui mettent à jour le DOM à votre place.
• Accessibilité web : un DOM bien structuré au service des lecteurs d’écran.
• Web scraping : l’extraction de données en lisant le DOM des pages.
• Angular : un framework qui gère le DOM pour les applications métier.

Questions fréquentes

Que veut dire DOM en informatique ?

DOM signifie Document Object Model, soit « modèle objet de document ». C’est la représentation en arbre d’une page web, que les programmes peuvent lire et modifier.

Qu’est-ce que le DOM en JavaScript ?

C’est l’interface qui permet à JavaScript d’agir sur la page : trouver un élément, changer son texte, ajouter une classe, réagir à un clic. L’objet document en est le point d’entrée.

Qu’est-ce que le DOM virtuel ?

C’est une copie simplifiée du DOM conservée en mémoire par certains frameworks comme React. Le framework compare les versions et n’applique à la page réelle que les changements nécessaires, ce qui améliore les performances.

Votre application web devient lente ou difficile à faire évoluer ?
Nous analysons son front-end et vous proposons des améliorations concrètes.