Appearance
Document Object Model (DOM)
Présentation
Le DOM ou Document Object Model est un concept central dans le développement Web. Il est intrinsèquement lié au format HTML et est un élément essentiel à la bonne compréhension de la façon dont le navigateur web interprète notre code Javascript et CSS.
Dans ce chapitre, nous reviendrons sur le concept de DOM pour en saisir le sens et son lien avec le code HTML et Javascript d’un site web.
Une interprétation objet du code HTML
Cognition visuelle et orienté objet
Le développement web est intrinsèquement lié au paradigme orienté objet. Comme dans la majorité des applications mettant en jeu une interface graphique, l’orienté objet est particulièrement adapté pour se représenter un ordonnancement d’éléments visuels.
Cognitivement, l’humain analyse instinctivement les signaux visuels qu’il perçoit pour décomposer l’espace qui l’entoure en différents objets. Notre cerveau hiérarchise également ces objets en différents niveaux, établissant par exemple qu’une voiture est composée d’un moteur, lui-même composé de cylindre, etc.
C’est cette capacité innée qui nous pousse naturellement à considérer un site Web en section, en bloc et en paragraphe, plutôt que de n’y voir qu’un amas de pixels formant des plages de couleurs connexes.
Notre façon de développer s’inscrit dans le prolongement de nos capacités cognitives et c’est pourquoi le développement orienté objet est si présent aujourd’hui.
De la balise à l’objet
Un document HTML ne le traduit peut-être pas au premier coup d’œil, mais il est une façon très élégante de représenter une hiérarchie d’objets. Le système de balisage du HTML notamment, permet de représenter les différentes couches constitutives du visuel d’un site. Le nom des balises permet de nommer les différents objets présents, et les attributs de chaque balises permettent d’apporter une description plus précise en fonction de la nature de l’objet à décrire.
Du point de vue du DOM, un document HTML est en quelque sorte une suite d’instructions permettant de construire l’ensemble des objets visuels du site. Chaque balise est la formalisation d’un constructeur, dont le nom représente la classe, et les attributs les arguments du constructeur.
Les navigateurs web, communément développés en C++, réalisent d’ailleurs cette conversion du HTML en différents objets (si l’on simplifie grandement). Chaque objet ainsi généré a la particularité d’avoir en attributs un objet parent, et potentiellement un ou plusieurs objets enfants. Cette liaison entre les objets du site constitue une forme d’arbre de parentage semblable à un arbre généalogique. C’est pourquoi on représente souvent les objets du DOM sous la forme d’un arbre :
DOM et Javascript
L’usage premier du Javascript est d’agir sur les objets présents dans le DOM. Les fonctions Javascript effectuent très souvent des actions se rapportant à :
- Identifier et récupérer un objet du DOM afin de le modifier.
- Créer un nouvel objet pour le placer à un endroit particulier du DOM.
- Associer une action à un évènement touchant un élément spécifique du DOM et dont le rôle sera généralement de modifier le DOM une fois l’évènement déclenché.
C’est pourquoi, en dehors des commandes algorithmiques de base, l’essentiel des commandes Javascript s’apparente souvent à la manipulation des objets du DOM via des méthodes nous permettant de récupérer un objet du DOM (getElementById, querySelector , etc.) ou créer et placer des objets dans le DOM (createElement, appendChild, etc.), ou leur affecter des évènements (addEventListener).
Au centre de notre conception de la page d’un site web, la bonne appréhension du concept de DOM est très importante pour correctement saisir la plupart des interactions permises par l’usage du Javascript, et plus généralement pour comprendre l’interaction qu’auront les différents codes HTML, CSS et Javascript entre eux en décrivant le contenu, l’apparence et le comportement des objets visuels affichés.
Aller plus loin
- Sur le DOM :