DOM: Document Object Model

Le Document Object Model (DOM) est une API fournie par le navigateur. Lorsqu’un navigateur reçoit un document HTML, il analyse le texte et construit un arbre d’objets (nœuds) représentant chaque élément, attribut et morceau de texte sur la page.

Pourquoi c’est important

Le DOM est la source ultime de vérité pour ce que l’utilisateur voit. Cependant, la mise à jour directe du DOM via JavaScript est coûteuse en calculs. Ce goulot d’étranglement des performances est la raison pour laquelle les bibliothèques d’interface utilisateur modernes (comme React ou Vue) ont inventé le Virtual DOM — une copie légère en mémoire de l’arbre utilisée pour calculer le nombre minimum de mises à jour réelles du DOM nécessaires.

Le DOM Réel vs. Le DOM Virtuel

• DOM Réel : L’arbre réel maintenu par le navigateur. Y lire ou y écrire déclenche des recalculs de mise en page et des redessins coûteux.
• DOM Virtuel : Un objet JavaScript qui reflète le DOM réel. Les frameworks mettent à jour le DOM virtuel rapidement, calculent la “différence” (diff), puis n’appliquent que les nœuds modifiés au DOM réel.

Concepts Associés

• Lire le guide complet : Ce qu’est vraiment l’architecture Frontend
• Voir aussi : Stratégie de Rendu