Introduction au DOM

L'arbre des éléments HTML

Le DOM, pour "Document Object Model" est une structure de données qui contient l'ensemble des éléments HTML d'une page web. C'est essentiellement un arbre, où chaque élément HTML est un noeud qui contient des attributs et potentiellement d'autres éléments HTML enfants.

La représentation d'une page web par le DOM peut ressembler à ceci:

On appelle ce genre de structure un arbre, car chaque élément est relié à un autre par des liens de parenté, similaire à un arbre généalogique. Dans le schémas, on peut aussi le voir comme un arbre à l'envers ou comme les racines d'une plante ou d'un arbre.

Parcourir et modifier l'arbre

Le DOM est accessible dans le Javascript à travers l'objet document. Cet objet est la racine de l'arbre, et il nous permettra de parcourir et manipuler les éléments HTML de la page. Lorsqu'on veut accéder à un élément de l'arbre, nous devons toujours le trouver en partant de la racine, soit l'objet document. De la même manière, si nous voulons ajouter un élément à la page, nous devrons trouver le noeud parent où nous voulons ajouter l'élément (en partant de la racine) et ensuite ajouter l'élément voulu à ce noeud.

Chaque noeud de l'arbre est aussi un objet Javascript. Celui-ci contient, bien entendu, une liste des éléments enfants qu'il contient, mais aussi des méthodes et des propriétés pour accéder et modifier ces attributs, son style CSS ou encore y programmer des événements. Dans ce module, nous verrons comment utiliser ces éléments pour accéder à notre page web et la modifier.