open

Présentation de l'interface DOM

#1 Qu'est ce que le DOM ? open

Le Document Object Model est une manière standardisée d'interfacer un langage de programmation avec un document écrit en XML ou en HTML. C'est le W3C (World Wide Web Consortium) qui a décrit ce standard dans des documents de spécification.

Ce standard est indépendant de tous langages et de toutes plateformes. Dans le document de spécification c'est un pseudo langage qui est utilisé pour spécifier les objets.

Pour interfacer le langage avec le document on doit :

  1. construire une structure d'objets qui accueille le document.
  2. donner la possibilité au langage d'accéder au document, de le modifier.
  3. informer le langage de ce qui se passe sur le document. Par exemple lorsque le document est cliqué ou survolé.

Le programmeur web travaille sur des implémentations du DOM écrites en Javascript. On trouve une implémentation sur chaque navigateur, une sur Chrome une autre sur Firefox une autre sur Opéra etc. Et toutes fonctionnent de la même façon.

#2 Historique open

Avant le DOM le document était statique et il n'était pas possible de le manipuler. Le DOM est né en 1997 de ce besoin de manipuler le document et de le rendre dynamique.

Au départ plusieurs DOM on vu le jour sur différents navigateurs concurrents. Les programmeurs ont dû s'adapter et pour cela ils devaient détecter le type du navigateur pour ajuster leur code en conséquence.

Le besoin de normalisation était évident et cette tâche a été confiée au W3C.

Le DOM Level 1, première version du DOM a vu le jour en 1998. Cette version est faite de deux parties. Une partie core et une partie HTML.

Le DOM Level 2 est sortie en 2000. Plusieurs parties ont été ajoutées notamment une partie sur les événements et une autre sur la feuille de style.

Aujourd'hui (Mars 2019) c'est la version DOM4 qui est intégrée au HTML 5.

#3 Présentation de l'arbre du DOM open

Les informations du document HTML sont stockées dans un arbre. En première approximation on peut faire remarquer les choses suivantes :

  1. Un nœud de l'arbre contient l'instance d'un objet Javascript.
  2. Chaque éléments HTML a son propre objet Javascript ce qui fait que tous les nœuds de l'arbre ne sont pas les mêmes.
  3. Tous les nœuds quelque soit leur type descendent au sens orienté objet d'un ancêtre commun, l'objet Node . Ils ont donc tous les propriétés et les méthodes de Node.
  4. L'objet Node contient un tableau childNodes dans lequel sont stockés la liste des enfants d'un nœud.

Dans le tutoriel suivant on va parcourir cet arbre de manière à voir de manière précise comment il est construit et ce qu'il y a dedans.

#4 La hiérarchie des objets du DOM ? open

Je l'ai dit l'objet Node est au centre de la construction de l'arbre et le DOM est séparé en deux parties. On retrouve ça au niveau de la structure des objets.

Extrait de la hiérarchie des objets du DOM
Hiérarchie des objet du DOM

Vous pouvez accéder à une carte des objets au format html

#5 La documentation open

Document du W3C en anglais pour tous les niveaux.

Documents traduits en français pour le niveau 2, core, html, événements, feuilles de style.