Finalement, c’est quoi le DOM
Le Document Object Model, ou “DOM”, est une interface pour les pages web. Il s’agit essentiellement d’une API pour la page, permettant aux programmes de lire et de manipuler le contenu, la structure et les styles de la page. Décomposons tout ça.
Comment se construit une page Web ?
La façon dont un navigateur passe d’un document HTML source à l’affichage d’une page stylisée et interactive dans la fenêtre d’affichage s’appelle le “chemin de rendu critique”. Bien que ce processus puisse se décomposer en plusieurs étapes, ces étapes peuvent être regroupées en deux grandes étapes. La première étape implique que le navigateur analyse le document pour déterminer ce qui sera rendu sur la page, et la deuxième étape implique que le navigateur effectue le rendu.
Le résultat de la première étape est ce qu’on appelle un “arbre de rendu”. L’arbre de rendu est une représentation des éléments HTML qui seront rendus sur la page et leurs styles associés. Pour construire cette arborescence, le navigateur a besoin de deux choses :
- Le CSSOM, une représentation des styles associés aux éléments
- Les DOM, une représentation des éléments
Comment le DOM est-il créé (et à quoi ressemble-t-il) ?
Le DOM est une représentation basée objet du document HTML source. Il y a quelques différences, comme nous le verrons ci-dessous, mais il s’agit essentiellement d’une tentative de convertir la structure et le contenu du document HTML en un modèle objet qui peut être utilisé par divers programmes.
La structure de l’objet du DOM est représentée par ce que l’on appelle un “arbre de nœuds”. On l’appelle ainsi parce qu’il peut être considéré comme un arbre avec une seule tige parentale qui se divise en plusieurs branches enfantines, chacune pouvant avoir des feuilles. Dans ce cas, la “tige” parent est l’élément racine , les “branches” enfant sont les éléments imbriqués, et les “feuilles” sont le contenu des éléments.
Prenons ce document HTML comme exemple :
Ma première page Hello, world!
Comment ça va ?
Ce document peut être représenté par l’arborescence de nœuds suivante :
Ce que le DOM n’est pas
Dans l’exemple que j’ai donné ci-dessus, il semble que le DOM soit un mappage 1 pour 1 du document HTML source ou de ce que vous voyez vos outils de developpement. Cependant, comme je l’ai mentionné, il y a des différences. Pour bien comprendre ce qu’est le DOM, il faut regarder ce qu’il n’est pas.
Le DOM n’est pas votre source HTML
Bien que le DOM soit créé à partir du document HTML source, il n’est pas toujours exactement le même. Il y a deux cas dans lesquels le DOM peut être différent du HTML source.
Lorsque le HTML n’est pas valide
Le DOM est une interface pour les documents HTML valides. Pendant le processus de création du DOM, le navigateur peut corriger certaines invalidités dans le code HTML.
Prenons ce document HTML par exemple :
Hello, world! dans le document, ce qui est une exigence pour un HTML valide. Si nous regardons l’arbre DOM résultant, nous verrons que cela a été corrigé :
Lorsque le DOM est modifié par Javascript
En plus d’être une interface pour visualiser le contenu d’un document HTML, le DOM peut aussi être modifié, ce qui en fait une ressource vivante.
Nous pouvons, par exemple, créer des nœuds supplémentaires au DOM en utilisant Javascript.
var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("I'm new!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph);Ceci va modifier le DOM mais bien évidement pas notre document HTML.
Le DOM n’est pas ce que vous voyez dans le navigateur (i.e., l’arbre de rendu)
Ce que vous voyez dans la fenêtre du navigateur est l’arbre de rendu qui, comme je l’ai mentionné, est une combinaison du DOM et du CSSOM. Ce qui sépare vraiment le DOM de l’arbre de rendu, c’est que ce dernier n’est constitué que de ce qui sera éventuellement peint à l’écran.
Parce que l’arbre de rendu ne se préoccupe que de ce qui est rendu, il exclut les éléments qui sont visuellement cachés. Par exemple, les éléments qui ont l’affichage display:none.
Hello, world!
Le DOM inclut l’élément
:
Cependant, l’arbre de rendu, et donc ce qui est vu dans la fenêtre, n’inclura pas cet élément.
Le DOM n’est pas ce qui est dans l’outil de développement
Cette différence est un peu plus petite car l’inspecteur d’éléments DevTools fournit une approximation plus proche du DOM que ce nous avons dans le navigateur. Cependant, l’inspecteur DevTools inclut des informations supplémentaires qui ne se trouvent pas dans le DOM.
Le meilleur exemple est celui des pseudo-éléments CSS. Les pseudo-éléments créés à l’aide des sélecteurs ::before et ::after font partie de l’arborescence CSSOM et de l’arbre de rendu, mais ne font techniquement pas partie du DOM. C’est parce que le DOM est construit à partir du seul document HTML source, sans inclure les styles appliqués à l’élément.
Malgré le fait que les pseudo-éléments ne font pas partie du DOM, ils sont dans notre inspecteur d’éléments devtools.
C’est pourquoi les pseudo-éléments ne peuvent pas être ciblés par Javascript, car ils ne font pas partie du DOM.
Conclusion
Le DOM est une interface vers un document HTML. Il est utilisé par les navigateurs comme première étape pour déterminer ce qui doit être rendu dans la fenêtre d’affichage, et par les programmes Javascript pour modifier le contenu, la structure ou le style de la page.
Bien que semblable à d’autres formes du document HTML source, le DOM est différent à plusieurs égards :
- Il est toujours valide HTML
- C’est un modèle vivant qui peut être modifié par Javascript
- Il ne contient pas de pseudo-éléments (ex : ::after)
- Il contient des éléments cachés (par ex. avec display : none)
Je ferai plusieurs autres articles au sujet du Shadow DOM ou du Virtual DOM mais n’hésitez pas à me poser des questions par commentaire si vous voulez plus d’informations.
