Le DOM Level 1 Core du W3C est un modèle objet puissant permettant de modifier l'arbre de contenu de documents. Il est géré dans Mozilla (sur lequel Firefox et Netscape sont basés) et (pour la plus grande partie) dans Internet Explorer 5 pour Windows. Il s'agit d'une base essentielle du scripting sur le Web dans l'avenir.
Définition d'un arbre de contenu
Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur les espaces dans le DOM) :
<html> <head> <title>Mon document</title> </head> <body> <h1>Titre</h1> <p>Paragraphe</p> </body> </html>
Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage.
Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.)
Ce que permet le DOM Level 1 Core
Le DOM Level 1 permet de modifier l'arbre du contenu selon vos désirs. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété document de l'objet global. Cet objet document implémente l'interface Document de la spécification DOM Level 1 du W3C.
Un exemple simple
Supposons que l'auteur désire prendre le document présenté plus haut et changer le contenu du titre, ainsi qu'écrire deux paragraphes plutôt qu'un seul. Le script suivant le permettrait (avec le surlignage dans la syntaxe des mots réservés Javascript, des propriétés et méthodes DOM prédéfinies et des commentaires Javascript):
// document.getElementsByTagName("H1") renvoie une liste des éléments H1 // dans le document, et le premier porte le numéro 0 : var header = document.getElementsByTagName("H1").item(0); // le premier enfant de l'élément H1 est un nœud textuel, et sa propriété // data contient son texte : header.firstChild.data = "Un document dynamique"; // le titre est à présent "Un document dynamique". // Trouve le premier élément P du document de la même manière : var para = document.getElementsByTagName("P").item(0); // et change son texte également : para.firstChild.data = "Ceci est le premier paragraphe."; // crée un nouveau nœud texteuel pour le second paragraphe var newText = document.createTextNode("Ceci est le second paragraphe."); // crée un nouvel élément qui deviendra le second paragraphe var newElement = document.createElement("P"); // place le texte dans le paragraphe newElement.appendChild(newText); // et place le paragraphe à la fin du document en l'ajoutant à l'élément // BODY (qui est le parent de para) para.parentNode.appendChild(newElement);
Vous pouvez voir ce script dans un exemple complet.
Pour en savoir plus
Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant les méthodes fondamentales de DOM Level 1. C'est la suite de ce document.
Consultez également la spécification DOM Level 1 Core du W3C (traduction en français non normative). C'est une spécification relativement claire, même si elle est un peu formelle. Ce qui est surtout intéressant pour les auteurs, c'est la description des différents objets DOM et de toutes leurs propriétés et méthodes. Voyez encore notre documentation complète sur le DOM.
Informations sur le document original
- Auteur(s) : L. David Baron <dbaron at dbaron dot org>
- Copyright : © 1998-2005 par des contributeurs individuels à mozilla.org ; le contenu est disponible sous une licence Creative Commons