Document Object Model (DOM), qui est essentiellement le jargon du développement Web pour « comment les pages Web fonctionnent dans les coulisses », est quelque chose que tout développeur Web devrait avoir dans leur boîte à outils. C'est comme la sauce secrète qui alimente le développement Web moderne.

Mais pourquoi DOM ? Je suis récemment tombé sur une vidéo montrant le fonctionnement des navigateurs, puis je me suis attardé sur quelques articles et voici ma compréhension du « pourquoi ? »

Chaque navigateur fonctionne avec un **moteur de navigateur**, il s'agit d'un composant essentiel d'un navigateur Web chargé de restituer le contenu Web, notamment HTML, CSS et JavaScript, dans une représentation visuelle avec laquelle les utilisateurs peuvent interagir.

Le « Document » : Ce terme désigne une page Web chargée dans un navigateur Web. Il représente la hiérarchie structurée du contenu de la page Web, comprenant des éléments tels que des titres, des paragraphes, des images, des liens, des formulaires, etc. Le document DOM est essentiellement une représentation en mémoire de la structure de la page Web, créée par le moteur de rendu du navigateur lors du chargement de la page.

Vient maintenant la partie intéressante de la façon dont le moteur du navigateur transforme le document en une arborescence de nœuds, que nous appelons le DOM pour la peinture.

Eh bien, après avoir téléchargé le document, il est converti en données brutes, oui, 0 et 1. Et ces octets de données brutes sont convertis en caractères. Cette conversion est effectuée en fonction du codage de caractères du fichier HTML.

Ces caractères sont ensuite analysés en quelque chose appelé jetons. Comme tout autre jeton de langage de programmation, il peut être défini comme le plus petit élément individuel de ce langage de programmation qui est significatif. Ici, le jeton fait référence aux balises HTML, à savoir body, h1, h2, p, durée, etc.

Une fois la tokenisation terminée, l'étape suivante consiste à structurer ces jetons. C'est ici que les objets entrent en jeu.Un objet est créé à partir de ces jetons, ces objets contiennent de nombreuses informations sur chaque entité, notamment le début de la balise, la fin de la balise, les attributs, les données/valeurs, etc.

Maintenant, nous avons un « Document » et des « Objets », mais il n'est toujours pas structuré car il n'y a aucune relation entre ces objets. Après tokenisation, ces tokens sont transformés en nœuds. Chaque nœud aura une relation avec un autre, comprenant des nœuds parent, enfant et frère. Ces relations nœud à nœud forment une structure arborescente familière. Ce processus est connu sous le nom de modélisation de l'arborescence d'objets. Désormais, un modèle d'arborescence de nœuds est prêt à partir du document HTML et prêt à être peint.

Pour récapituler, le nom « Modèle objet de document » reflète son objectif et sa fonction. Il sert de modèle structuré pour le contenu d'une page Web, représenté comme une collection d'objets. Le nom « DOM » est né de la fusion de « Document » (la page Web), « Objet » (représentant des éléments) et « Modèle » (la représentation structurée).

J'espère que cela vous aidera, et n'hésitez pas à nous faire part de vos commentaires ou à vous demander si vous avez des questions ou des préoccupations spécifiques.