Modèle DOM

Introduction

1. Définition de DOM

DOM (modèle objet de document ou Document Object Model) est le modèle d’accès aux différentes composantes des documents HTML ou encore XML.

Dans le chapitre Exploration de flux XML via DOM, nous verrons dans le détail comment exploiter des flux XML dans des scripts JavaScript.

Par son intermédiaire, vous disposerez d’une description structurée du script HTML et DOM fournit aussi le mode d’accès aux éléments constitutifs du modèle.

En tant que développeur, ce sera un allié précieux pour accéder à ces éléments et les manipuler depuis un langage de programmation (JavaScript par exemple mais pas seulement).

DOM va être pour nous un schéma d’accès pour atteindre les constituants (formulaire, champ...) d’une page web balisée.

Ce modèle fournit une hiérarchie de programmation agençant les propriétés, les méthodes, les événements.

L’étude et la bonne compréhension du modèle DOM sont bien évidemment indispensables pour pouvoir utiliser au mieux les principales bibliothèques JavaScript (librairies), comme Prototype, jQuery, MooTools...

Le modèle DOM est un arbre constitué d’objets Node (nœuds). Il s’agit d’une structure arborescente avec un nœud de type racine et des nœuds enfants. Dans notre exemple ci-après (script HTML), le nœud head est un enfant du nœud <html>. Le nœud <head> est lui-même parent du nœud <title>. Les balises <input> intégrées dans la section <body> ... </body> représentent un exemple de nœuds de même niveau qui ont un même parent, le formulaire nommé formulaire_saisie.

<html> 
    <head> 
        <title> 
        </title> 
    </head> 
    <body> ...

Apprentissage du modèle DOM

Dans une série d’exemples, voyons comment il est possible depuis JavaScript d’écrire du texte (puis des éléments DOM plus complexes) dans un document HTML via JavaScript.

1. Script "Hello World!"

Dans ce premier script, voyons comment afficher une chaîne de caractères "Hello World!" dans le corps du document HTML en y ajoutant aussi des balises de mise en forme (gras).

Le script n’est pas écrit ci-après dans son intégralité, seule la séquence JavaScript concernée, intégrée dans la section HTML <body> du script, est reproduite :

<!-- Début script JavaScript --> 
<script type="text/JavaScript"> 
 
    /* Affichage du nom du script */ 
    alert("DOM_01"); 
 
    /* Affichage Hello World! par la méthode document.write */ 
    document.write("Hello World!<br />"); 
 
    /* Affichage Hello World! par la méthode document.write */ 
    /* avec mise en gras du mot World */ 
    document.write("Hello <b>World</b>!"); 
 
</script>

À l’exécution après l’affichage, par la méthode alert, d’une boîte de dialogue annonçant l’intitulé de l’exercice (DOM_01), nous obtenons tout naturellement l’affichage suivant dans la section body :

Sur cet exemple, vous voyez la possibilité d’intégrer dans la séquence à afficher des balises de mise en forme comme <b> ... </b> (mise en gras). En réalité toutes les balises et tous les attributs de balises HTML sont intégrables par la méthode document.write. Dans l’absolu, l’intégralité du script HTML pourrait de ce fait être programmée via JavaScript.

2. Différence entre write et writeln

Dans ce petit exemple, voyons la différence entre les méthodes write et writeln.

<!-- Début script JavaScript --> 
<script type="text/JavaScript"> 
 
    /* Affichage du nom du script */ 
    alert("DOM_02"); 
 
    /* Mise en évidence de la différence 
    entre document.write et document.writeln */ 
    /* NB1 : Avec la méthode writeln le retour chariot 
    en fin de ligne est implicite */ 
    /* NB2 : La méthode writeln requiert l'encadrement 
    de la séquence par un jeu de <pre> ... </pre> */ 
    document.write("<pre>"); 
    document.write("Ligne n°1<br />"); 
    document.write("Ligne n°2<br />"); 
    document.write("Ligne n°3<br /><br />"); 
    document.writeln("Ligne n°4"); 
    document.writeln("Ligne n°5"); 
    document.write("Ligne n°6"); 
    document.write("</pre>"); 
 
</script>...