|
Etroitement lié à l'HTML et à XML (eXtensible Markup Language),
le DOM (Document Object Model ou modèle d'objet document) est une
API (Application Programmation Interface, ou interface de programmation
d'application) créée pour ces langages afin de permettre leur manipulation
par d'autres langages de programmation (C/C++, Java, Perl, etc.)
ou de script (Javascript, Vbscript, etc
). Il est ainsi possible
d'accéder et de modifier dynamiquement le contenu et la structure
d'un document XML ou HTML. Le W3C
(World Wide Web Consortium) a publié le premier niveau de spécifications
pour le DOM (concernant la navigation au sein des documents et leur
manipulation) le 1er octobre 98, et le deuxième niveau (incluant
un modèle d'objet de feuille de style et permettant donc de modifier
les informations relatives au style d'un document) le 13 novembre
2000. Un troisième niveau est en cours d'élaboration (le dernier
« working draft »
ayant été publié le 14 décembre dernier). Le DOM est indépendant
de la plate-forme et du langage utilisé, et fut élaboré, à l'origine,
pour éliminer les problèmes de compatibilité entre les navigateurs
lors de l'implémentation de code DHTML (Dynamic HTML, soit une combinaison
d'HTML, de Javascript et de feuilles de style). L'utilisation du
DOM doit permettre de simplifier considérablement la tâche du développeur
web, en produisant du code raccourci et rationalisé. Mais seuls
Internet Explorer 5 et Netscape Communicator 6 permettent une implémentation
correcte de l'API.
Le DOM se divise en trois ensembles d'objets: le Core DOM est une
interface bas-niveau, compacte mais minimale, qui, si elle est capable
de représenter tout document HTML ou XML, n'a pas la facilité d'utilisation
de l'HTML DOM ou de l'XML DOM, les deux autres ensembles d'objets
permettant des accès plus directs à des types de document plus spécifiques.
Les objets du DOM sont les nuds d'une arborescence. Parmi les différents
nuds figurent (du plus haut au plus bas niveau) : le document,
les éléments (balises), les attributs (des balises), les commentaires,
ou encore les contenus textuels. Créer un nouveau nud appartenant,
par exemple, à cette dernière catégorie, pourra être réalisé par
la déclaration Javascript suivante :
var txt = document.createTextNode("Un
nouveau contenu textuel
");
Un élément (ici, une balise <A>) et son attribut (ici HREF)
seront, quant à eux, déclarés comme suit :
var lien = document.createElement('a');
lien.setAttribute = ('href', "www.journaldunet.com");
L'ajout de ce noeud à un document HTML est effectué par la méthode
getElementById(), qui renvoie un objet (par exemple une balise <DIV>
ou <P>) dont l'attribut ID est spécifié. Ainsi, pour insérer
le lien dans la balise <DIV ID="layer1"> (juste
avant la balise de fermeture), on écrira :
document.getElementById('layer1').appendChild('txt');
Un nud peut par ailleurs être accédé en parcourant l'arborescence.
Si le document HTML a la structure suivante :
<HTML>
<HEAD>
<TITLE>Exemple</TITLE>
</HEAD>
<BODY>
<DIV ID="Layer1"></DIV>
</BODY>
</HTML>
Alors l'ajout du nud txt peut s'effectuer ainsi :
document.childNodes[1].childNodes[0].appendChild('txt');
En effet, le deuxième fils (la numérotation commence à 0) de l'objet
document (balise HTML) est la balise <BODY>, dont le premier
fils est cette fois la balise <DIV> qui nous intéresse.
Les possibilités du DOM permettent, notamment, de s'affranchir
d'une bonne partie des lignes de code que nécessite le DHTML. Il
suffit de comparer, par exemple, les sources des pages suivantes
(dont l'examen constitue par ailleurs un bon exercice) :
Effet « mouseover »
créé avec Dreamweaver en DHTML.
Effet « mouseover »
créé avec le DOM.
Ces exemples sont loin d'être exhaustifs, mais illustrent la manière
dont le DOM permet la manipulation d'un document, qu'il soit en
HTML ou en XML. De nombreuses références (en anglais) peuvent être
trouvées sur le site du W3C,
celui d'Oasis,
ou encore celui de Microsoft.
|
[