Qu’est-ce que le DOM d’une page web

by karim

Le Document Object Model (ou DOM) est une recommandation du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d’accéder ou de mettre à jour le contenu, la structure ou le style de documents XML. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu’il sera présenté. : Wikipedia

On parle également de notion d’arbre ou chaque balise y représente un noeud afin de faciliter le déplacement entre eux. Mais d’autre méthodes tel que getElementById() permet de faire référence à un élément précis de l’arbre sans faire référence à son arborescence.

Les balises HTML définissent la structure de l’arbre. La racine est document et le tronc HTML. Les branches varient en fonction du contenu du document. Ci-dessous un exemple simple d’arbre :

Pour parcourir ou connaitre le DOM d’une page web, vous pouvez télécharger l’extension Inspecteur DOM pour firefox.

Utiliser le DOM avec JavaScript

La fonction getElementById() permet d’accéder à un élément de l’arbre DOM grâce à son id.

 1 
 <p id="paragraphe01" class="texte">Bonjour à tous</p>

Le bloc <p> est accessible de la manière suivante :

 1 
 document.getElementById("paragraphe01")

Vous pouvez donc agir sur lui. Dans l’exemple ci-dessous, nous allons changer la couleur :

 1 
 document.getElementById("paragraphe01").style.color = "#ddcddc";

Vous pouvez également vous servir de la fonction inner pour changer le contenu d’un bloc.

Naviguer dans l’arbre DOM en JavaScript

A partir du JavaScript, vous pouvez naviguer dans l’arbre DOM et atteindre et modifier chacun des éléments du document par l’intermédiaire de différentes fonctions. Voici les plus utiles :

Fonction Description
parentNode L’attribut renvoie son noeud parent. S’il n’a pas de noeud parent, il renvoie NULL
childNote L’attribut renvoie un tableau de tous ses noeuds enfants. S’il n’a pas de noeud enfant, alors il renvoie un tableau vide.
firstChild L’attribut renvoie son premier noeud enfant. S’il n’a pas de noeud enfant, il renvoie NULL
lastChild L’attribut renvoie son dernier noeud enfant. S’il n’a pas de noeud enfant, il renvoie NULL
nextSilbing L’attribut renvoie le noeud frere qui le suit. S’il n’a pas de noeud suivant, il renvoie NULL
previousSilbing L’attribut renvoie le noeud frere qui le précède. S’il n’a pas de noeud précédent, il renvoie NULL

Manipuler les éléments et modifier l’arbre DOM

Maintenant que vous savez vous déplacez dans l’arbre DOM, nous allons découvrir comment manipuler et modifier ses noeuds grâce aux attributs suivants :

A la première ligne, on créer un élément de type DIV, ensuite on créer un deuxième noeud (2eme ligne), mais de type TEXT, avec comme valeur : « Bonjour à tous ». Le noeud TEXT qui vient d’être insérer est considérer comme un enfant de l’élément DIV.

Fonction Description
createElement Cette méthode permet de créer un élément du type passé en paramètre. Dans l’exemple ci-dessous, la ligne de code permet de créer un élément DIV :

 

 1 
 document.createElement("div")
createTextNode Cette méthode permet de créer un élément de type Text.
appendChild Cette méthode permet d’insérer un noeud en derniére position de ses élément enfants.

 

 1 2 3 4 
 nouveauDiv = document.createElement("div"); text = document.createTextNode("Bonjour à tous"); nouveauDiv.appendChild(text); document.body.appendChild(nouveauDiv);
insertBefore Cette méthode permet d’insérer un noeud enfant A avant un noeud enfant B.

 

 1 2 
 noeudA = document.createElement("div"); document.body.insertBefore(noeudA, noeudB);
replaceChild Cette méthode permet de remplacer un noeud enfant A par un noeud enfant B.

 

 1 
 elementParent.replaceChild(noeudB, noeudA);
cloneNode Cette méthode permet de cloner un noeud A, et de facon optionnel ses enfants, et un noeud B.

 

 1 
 noeudB = noeudA.cloneNode(true);

Si le paramètre est définis avec la valeur TRUE, alors les noeuds enfants seront inclus, par contre, si la valeur est égale à FALSE, seul le noeud sera concerné.
removeChild Cette méthode permet de supprimer un noeud enfant.

 

 1 
 elementParent.removeChild(noeud);

Ce qu’il faut retenir :

La représentation du document sous forme d’arbre DOM permet de le manipuler grâce à différentes fonctions et / ou attributs de chaque noeud. Il est extrêmement important de comprendre la notion de DOM pour réaliser des programmation AJAX efficaces. Ces différentes fonctions permettent :

  • La navigation dans l’arbre DOM (parentNode, childNote …)
  • La récupération d’information dans l’arbre DOM
  • La manipulation de l’arbre DOM (createElement, apprendChild, …)