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

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

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é. source : Wikipedia

Le DOM est une représentation structurée et orientée objet. Elle permet de modifier les propriétés des éléments du contenu de la page.

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 :

FonctionDescription
parentNodeL’attribut renvoie son noeud parent. S’il n’a pas de noeud parent, il renvoie NULL
childNoteL’attribut renvoie un tableau de tous ses noeuds enfants. S’il n’a pas de noeud enfant, alors il renvoie un tableau vide.
firstChildL’attribut renvoie son premier noeud enfant. S’il n’a pas de noeud enfant, il renvoie NULL
lastChildL’attribut renvoie son dernier noeud enfant. S’il n’a pas de noeud enfant, il renvoie NULL
nextSilbingL’attribut renvoie le noeud frere qui le suit. S’il n’a pas de noeud suivant, il renvoie NULL
previousSilbingL’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.

FonctionDescription
createElementCette 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")
createTextNodeCette méthode permet de créer un élément de type Text.
appendChildCette 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);
insertBeforeCette 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);
replaceChildCette méthode permet de remplacer un noeud enfant A par un noeud enfant B.

1
elementParent.replaceChild(noeudB, noeudA);
cloneNodeCette 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é.

removeChildCette 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, …)

Article du même thême : ..

  • Pingback: DOM by bouche42 - Pearltrees

  • http://www.facebook.com/people/Seb-LeVrai/100002555580471 Seb LeVrai

    That’s not childNote but childNodes ;)

  • Dieu

    bon tuto ;)

  • Monsieur D

    Un tuto en français et un nom d’utilisateur français, pourquoi ce commentaire en Anglais? Pour avoir l’air plus évolué, citoyen du monde?

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.