Qu'est-ce que le DOM ?

Un article court et simple pour une première introduction au DOM, le Document Object Model, par Chris Coyier. Ce qu'il est, et ce qu'il n'est pas, dans un langage clair.

Par

Un lecteur m'a écrit dernièrement pour me demander ce qu'était le DOM. Il en avait entendu parler mais n'était pas sûr de comprendre de quoi il s'agissait. Regardons cela de plus près.

Est-ce le HTML que j'écris ?

Est-ce le HTML que j'écris ? Non, pas vraiment, mais le HTML que vous écrivez est analysé par le navigateur et transformé en DOM.

View Source

Est-ce que "View Source" est le DOM ? Non, pas vraiment, View Source vous montre le HTML qui constitue cette page. C'est probablement la même chose que le HTML que vous avez écrit.

Il pourrait toutefois avoir l'air différent si, par exemple, vous travaillez avec des templates dans un langage backend et que vous ne regardez pas souvent le résultat HTML compilé. Ou bien s'il y a un process qui intervient après que vous ayez écrit votre HTML lorsque le code est utilisé pour le site en ligne. Peut-être ce HTML est-il compressé ou modifié.

View Source est un peu bizarre en réalité. Les seules personnes qui se préoccupent de regarder ce code, ce sont les développeurs, tous les principaux navigateurs ont des outils développeurs (DevTools) maintenant. Il est sans doute un peu dépassé aujourd'hui.

DevTools

Est-ce que le code que je vois dans DevTools est le DOM ? Oui, d'une certaine façon ! Quand vous regardez l'affichage de n'importe quel DevTool (Chrome DevTool, Firefox developer tools,...) vous voyez une représentation visuelle du DOM. On y est !

c'est mon code !

Ummm... mais ça ressemble exactement à mon HTML ? Eh bien, oui, ça y ressemble. Normal, il a été créé directement à partir de votre HTML. Dans les cas les plus simples, la représentation visuelle du DOM sera exactement votre HTML.

Mais souvent ce n'est pas le cas...

Quand le DOM est-il différent de mon HTML ?

Voici une possibilité : Imaginons qu'il y ait des erreurs dans votre HTML et que le navigateur les ait réparées. Disons que vous avez oublié l'élément <body> dans votre HTML. Votre code est invalide (1), et donc risqué car ce qu'un navigateur peut décider dans ce genre de situation est incertain, mais la plupart feront avec. Ils préfèreront tenter la réparation et vous montrer un site plutôt que d'échouer totalement et ne rien vous montrer. Votre CSS pourra donc y ajouter son style et Javascript pourra y accéder, comme s'il était vraiment dans votre HTML.

Une autre situation où le DOM est différent de votre HTML est l'élément <table> avec son élément requis <tbody>. La plupart du temps, on ne se soucie pas des balises <tbody> mais puisqu'elles sont requises, elles se retrouvent dans le DOM.

Cependant, le cas le plus vraisemblable vient du fait que...

JavaScript peut manipuler le DOM

Imaginons que vous ayez un élément vide comme ceci dans votre HTML :

<div id="container"></div>

Plus tard dans votre HTML il y a un peu de JavaScript :

<script>
      var container = document.getElementById("container");
      container.innerHTML = "New Content!";
</script>

Même si vous ne connaissez pas JavaScript, vous pouvez devinez ce que fait ce petit morceau de code (2). Sur l'écran, vous verrez New Content! affiché car ce div vide a été rempli avec un nouveau contenu.

Si vous utilisez DevTools pour vérifier la représentation visuelle du DOM, vous verrez :

<div id="container">New Content!</div>

Ce qui est différent de votre HTML original ou de ce que vous verriez dans View Source.

Ajax et le templating

On ne va pas approfondir le sujet mais vous pouvez imaginer que si vous deviez utiliser Ajax pour aller chercher un contenu quelque part et l'afficher sur votre page, le DOM ne ressemblerait plus du tout à votre HTML original. Même chose si vous chargiez des données en utilisant un templating côté client.

Essayez d'aller sur Gmail et de regarder la source. Vous verrez une kyrielle de scripts et de données issus du chargement de la page originale. On y reconnaît à peine ce qu'on voit à l'écran.

JavaScript vs le DOM

JavaScript est un langage que le DOM lit et avec lequel il fait des choses. Mais le DOM est l'endroit où ces choses se produisent. En fait, ce que vous pourriez décrire comme "un truc JavaScript" est en fait souvent une "API DOM".

Par exemple nous pouvons écrire quelques lignes en JavaScript pour surveiller un événement mouseenter sur un élément. Mais cet "élément" est en réalité un noeud de l'arbre du DOM. Nous attachons ce listener via une propriété du DOM sur ce noeud du DOM. Quand l'événement se produit, c'est le noeud du DOM qui émet cet événement.

description d'un événement du DOM

Toutes mes excuses si je n'ai pas utilisé le vocabulaire le plus précis dans cet article, mais j'espère qu'ainsi vous aurez compris. Le DOM est le sang vital ici, c'est de là que tout part au navigateur. JavaScript n'est que la syntaxe, le langage. Il peut être utilisé complètement en dehors du navigateur, sans aucune API DOM (voir Node.js).

Cet article n'est pas nerdy pour un sou et il est suffisamment profond pour moi

Alors oui, le DOM ça signifie "Document Object Model" et blah blah blah. Je ne voulais pas (et je ne suis pas qualifié pour) écrire cet article. En voici de plus costauds :

W3C: What is the Document Object Model?
MDN: Introduction - Document Object Model
Wikipedia: Document Object Model


(1) NdT: en fait, aussi bizarre que cela puisse paraître, même sans <body> votre code, bien qu'incorrect, est valide.
(Retour à l'article)

(2) NdT: que fait ce code ? Il dit à votre navigateur d'aller "chercher dans le document un élément par son id" (getElementById) en spécifiant entre parenthèses son id (c'est container), il va donc chercher notre div précédente, puis d'assigner cet élément à une variable qu'il appelle container (var container = ...), ensuite de quoi .innerHTML lui dit d'ajouter une chaîne de caractères ("New Content!") à la variable container (notre div) : autrement dit, ce code insère un texte à l'intérieur de votre élément ( <div id="container"></div> ) qui était initialement vide.
(Retour à l'article)

Ressources complémentaires en français :

Premiers pas dans le DOM, de Gilles Chagnon
Qu'est-ce que le DOM, par Yoyodesign
Un article intéressant sur Alsacréations, "la gestion des événement en JavaScript".


original paru le dans CSS-Tricks.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.

Traduit avec l'aimable autorisation de CSS-Tricks et de l'auteur.
Copyright CSS-Tricks © 2013.