DHTML:DOM
Un article de WikiTuto.
Sommaire |
Qu'est-ce que le DOM?
Le Modèle Objet de Document, ou DOM, Document Object Model est un outil permettant l'accès aux documents HTML et XML. Il permet deux choses au développeur :
- Il fournit une représentation structurée du document ;
- Il codifie la manière dont un script peut accéder à cette structure.
Il s'agit donc essentiellement d'un moyen de lier une page Web, par exemple, à un langage de programmation ou de script.
Il est à remarquer que le DOM ne désigne pas une application particulière, ou bien un produit spécifique ou une présentation propriétaire d'une page Web. Il s'agit d'une interface qui permet de standardiser les moyens d'accès à une page Web. Toutes les propriétés et méthodes et tous les événements disponibles au développeur pour manipuler et créer des pages dynamiques sont organisés sous forme de hiérarchies d'objets. Le présent cours va donner les bases permettant d'aborder ce riche domaine.
Conception de l'arborescence
Qu'est-ce qu'un nœud?
Un langage de marquage comme HTML ou tout autre langage basé sur XML peut être schématisé comme une arborescence hiérarchisée. Les différentes composantes d'une telle arborescence sont désignés comme étant des nœuds. L'objet central du modèle DOM est pour cette raison l'objet node (node = nœud). Il existe différents types de nœuds. Dans un document HTML ordinaire existent dans tous les cas trois types de nœud importants qu'il nous faut distinguer : les nœuds-élément, les nœuds-attribut, et les nœuds-texte.
Un premier exemple
Pour comprendre, examinons la construction HTML simple suivante :
<h1 align="center">Bonjour</h1>
Dans cette construction, il y a un nœud-élément, à savoir le nœud-élément de l'élément h1. De plus, il y a un nœud-attribut, à savoir celui de l'attribut align, et enfin il y a ce qu'on appelle des "données en caractères", que l'on trouve à deux endroits : à savoir une fois comme contenu de l'élément h1, et une fois pour l'affectation de valeur à l'attribut align. Ces données en caractères représentent elles-mêmes des nœuds, à savoir des nœuds texte (pour plus de détails, il est nécessaire de se reporter à la définition des éléments et attributs dans un cours de XML).
Un deuxième exemple, plus complexe
Un autre exemple de construction doit aider à mieux comprendre :
<h1 align="center">Bonjour <i>tout le monde</i>!</h1>
Dans cet exemple est ajouté le marquage en italique du mot "monde". Il est important de comprendre maintenant, à quoi ressemble la hiérarchie des nœuds.
L'élément h1 est le nœud de sortie dans ce petit extrait de structure arborescente. Ce nœud a d'après les règles du modèle DOM, deux nœuds-enfant et un nœud associé : les nœuds enfant sont d'une part le nœud texte avec le mot "Bonjour" suivi d'un espace, d'autre part le nœud élément de l'élément i. L'attribut align dans la balise ouvrante <h1> n'est pas par contre un nœud-enfant mais un nœud associé. Le nœud-attribut a toutefois lui-même un nœud enfant à savoir la valeur affectée (center). Même le nœud-élément de l'élément i a, à son tour, un nœud-enfant, à savoir le nœud-texte de son contenu de caractères, donc le mot "monde".
Tous les nœuds de cette arborescence sont accessibles et manipulables -y compris les propriétés des feuilles de style et... les scripts eux-mêmes !
DOM et JavaScript
Nous allons dans la suite de ce cours nous limiter à des exemples codés en Javascript. Plus précisément, nous allons écrire des scripts en JavaScript, qui utiliseront le DOM pour manipuler dynamiquement les pages où ils se trouvent. Le DOM n'est pas un langage de programmation, mais sans lui, le JavaScript ne pourrait avoir aucun modèle de la page Web. Par le passé, des méthodes et objets propriétaires ont été utilisés, tant par Netscape qu'Internet Explorer, amenant à des "bricolages" de code dès lors que l'on voulait s'assurer qu'un effet DHTML était accepté par les deux familles de navigateurs.
À l'heure actuelle, il n'est heureusement plus nécessaire de passer par des scripts de détection de navigateur. Des solutions bien plus efficaces sont fournies par des détections fondées non plus sur l'identification du navigateur, mais sur la vérification du support ou non des méthodes nécessaires pour l'utilisation d'un script.
Voir aussi
- Qu'est-ce que le DOM?
- Accès aux éléments et attributs
- Avoir des informations sur les nœuds
- Modification de contenu
