Le Document Object Model (DOM) : dé­fi­ni­tion, structure et exemple

L’invention de Ja­vaS­cript au milieu des années 1990 a re­pré­senté un tournant important dans l’histoire du World Wide Web. Des sites, qui jusque-là étaient plutôt statiques, de­vien­nent pro­gres­si­ve­ment dy­na­miques grâce aux éléments de ce nouveau script de pro­gram­ma­tion. Les dé­ve­lop­peurs des na­vi­ga­teurs ont alors réagi en im­plé­men­tant des in­ter­pré­teurs ap­pro­priés et en dé­ve­lop­pant leurs propres modèles pour un HTML dynamique (DHTML). C’est grâce à ces in­ter­pré­teurs et à ces modèles que sont apparues des mo­di­fi­ca­tions de struc­tures im­por­tantes et de nouvelles pré­sen­ta­tions visuelles des documents Web, notamment grâce au na­vi­ga­teur qui permet d’exploiter tout le potentiel de Ja­vaS­cript.

Mais comme les dif­fé­rentes tech­niques employées n’étaient pas coor­don­nées, les con­cep­teurs de sites Internet, soucieux de proposer des projets dy­na­miques com­pa­tibles avec tous les na­vi­ga­teurs, se re­trou­vaient face à un défi de taille. C’est la raison pour laquelle le con­sor­tium W3C a publié en 1998 la première spé­ci­fi­ca­tion du Document Object Model (DOM), un cahier des charges qui jusqu’à ce jour, joue un rôle important dans la pro­gram­ma­tion Ja­vaS­cript.

Le Document Object Model (en français modèle d’objets de document), abrégé en DOM, est une interface de pro­gram­ma­tion nor­ma­li­sée per­met­tant de struc­tu­rer des documents HTML et XML. Cette interface a été développé et publiée par le World Wide Web Con­sor­tium (W3C), un organisme fondé en 1994 par l’inventeur du Web, Tim Berners-Lee, dans le but de dé­ve­lop­per des normes destinées au World Wide Web.

L’objectif du Document Object Model est d’offrir aux pro­gram­meurs un accès aux dif­fé­rents com­po­sants d’un projet Web, pour ainsi faciliter au mieux l’insertion, la sup­pres­sion ou l’édition des contenus, d’attributs et de styles. DOM fait office de pla­te­forme in­dé­pen­dante et de liaison (neutre quant au langage de pro­gram­ma­tion) entre les scripts de pro­gram­ma­tion comme Ja­vaS­cript et le document Web de base, en affichant la structure du document sous forme d’une ar­bo­res­cence, dans laquelle chaque nœud re­pré­sente un objet in­dé­pen­dant et con­fi­gu­rable. En raison de la forme de cette structure, cette manière de re­pré­sen­ter un projet Web est appelé un DOM-tree (arbre DOM en français).

Le Document Object Model a été développé pour être utilisé dans le World Wide Web, et c’est là qu’on le trouve avant tout. Pour être plus précis, ce sont les na­vi­ga­teurs utilisés par les in­ter­nautes pour accéder aux offres du Web, qui ex­ploi­tent l’interface nor­ma­li­sée :

La plupart des clients Web utilise le DOM ou des in­ter­faces basées sur le DOM, pour générer des pages HTML ou XML. Dans ce processus, les dif­fé­rents com­po­sants sont réunis en tant que nœuds, et organisés en arbre DOM. Pa­ral­lè­le­ment, le na­vi­ga­teur en question charge le rendu du document Web dans la mémoire locale, afin d’en assurer l’analyse, un éventuel trai­te­ment, pour pouvoir afficher ensuite la page sous la forme qui a été définie par le con­cep­teur du site. Pour le rendu, les na­vi­ga­teurs utilisent dif­fé­rents moteurs (Rendering-Software), comme Gecko (Firefox), Webkit (Safari) ou Blink (Chrome, Edge, Opera) qui tous, s’appuient sur le standard DOM.

Le Document Object Model reste pertinent comme pré­sen­ta­tion orientée objet d’un document Web. Il a aussi son intérêt comme interface pour l’ensemble des contenus dy­na­miques pro­gram­més, et par con­sé­quent pour toutes les in­te­rac­tions servant à modifier l’aspect d’une page pendant sa création.

Comme dans la structure de base HTML, l’objet HTML apparaît en première position dans la hié­rar­chie. Le header (entête) et le body (contenu principal) du site lui sont su­bor­don­nés. Le contenu principal doit être composé au moins d’un pa­ra­graphe (avec un contenu texte).

Main­te­nant que nous avons examiné dans les rubriques pré­cé­dentes la structure générale du Document Object Model, nous allons, au moyen d’un exemple concret, présenter quelques tech­niques de struc­tu­ra­tion élé­men­taires ap­pli­cables aux scripts de pro­gram­ma­tion. La base est le document HTML suivant, avec Header - incluant des liens vers les feuilles de style CSS - et le message principal, ainsi que deux éléments de contenu (image et texte) :

Voici une autre manière de re­pré­sen­ter le présent exemple du Document Object Model.