Fiche DOM : Introduction au DHTML (DOM)

Objet de la fiche

État de la fiche

Plan de la fiche

• | Avant-propos |
• | Le DOM HTML (Document Object Model) |
• | Javascript et interaction avec le DOM |

Avant propos

Lorsque l'internaute 1 via son navigateur 2 et Internet 3 charge une page HTML 4, cette dernière est envoyée vers le navigateur qui va la mettre dans sa mémoire 5 en la structurant sous forme d'objets 6 (écran, fenêtres, commandes, balises HTML) possédant leurs propriétés et méthodes. Les objets et leurs contenus  sont eux même rangés sous forme de tableaux 7. La page HTML est ensuite affichée sous forme de page Web 8. Cette organisation est appelée le Document Object Model ou plus simplement le DOM.

Cette organisation associée à javascript sera la base de la construction d'un site interactif.

DOM (Document Object Model)

Notion d'objets, propriétés et méthodes

Prenons l'exemple avec l'objet Automobile (télécommandée). Cet objet a des propriétés comme sa longueur, sa largeur, sa vitesse maximale, sa couleur etc. Suivant la technique de modélisation objet on pourra accéder à ces propriétés  de la manière suivante : Automobile.longueur ou Automobile.couleur.

L'objet Automobile se subdivise en objets tels l'objet Conduite, ou l'objet Moteur etc...

Maintenant assignons à l'objet Conduite lui-même fils de l'objet Automobile une fonction permettant de faire varier sa vitesse en fonction d'un paramètre x: soit V(x) cette fonction. Le fait de pouvoir agir sur la vitesse de l'objet Conduite fils de l'objet Automobile pourra se modéliser sous forme d'objet de la manière suivante : Automobile.Conduite.V(x)

On pourrait aussi imaginer une fonction direction D(z) avec z comme angle de direction ou encore une fonction phare P(état) avec état = 1 ou 0 pour phares allumés ou phares éteints. La modélisation donnerait Automobile.Conduite.D(z) ou Automobile.Conduite.P(état)

V(x) ou D(z) sont couramment appelées méthodes : méthode vitesse ou méthode direction de l'objet Automobile.
x, z, état sont appelés paramètres des méthodes.

L'appel à ces méthodes sans paramètres permet de lire l'état de l'objet relatif à la méthode : État des phares? = Automobile.Conduite.P()

Le DOM

DOM fournit une représentation structurée sous forme d'objets du document html. Lorsque le navigateur charge la page Internet cette dernière n'est pas rangée n'importe comment en mémoire mais comme une hiérarchie d'objets et de 'noeuds'. L'ensemble de cette hiérarchie  est structurée sous forme d'un 'arbre' et accessible sous forme de tableaux. Il est donc possible d'accéder à tous les objets d'une page web depuis un script client (javascript est le langage le plus utilisé pour accéder à ces objets).

Netscape et Microsoft ont développé des modèles de DOM sensiblement différents, ceci pouvant entraîner l' écriture d'une partie de code javascript pour chaque navigateur. Ces problèmes tendent à s'estomper avec les nouvelles versions des navigateurs qui sont de plus en plus conformes aux recommandations du consortium WWW (W3C).

Les objets du navigateur  possèdent un nom , des propriétés et des méthodes. Du fait de cette structure, le DOM est aussi une interface  qui permet aux concepteurs de pages Internet d'accéder à ces objets et de manipuler leurs contenus. Cette représentation structurée permet aussi (à l'aide de méthodes) l'ajout et la suppression des objets, permettant de concevoir des pages web au contenu dynamique en modifiant la structure et le style du document.

Le DOM fournit aussi une interface de gestion des événements, pour capturer les actions du navigateur et de son utilisateur, et d'y réagir. Cette partie très importante fera l'objet d'une fiche séparée.

Les principaux objets du DOM que nous seront amenés à utiliser

Les propriétés

L'objet window (fenêtre) nous permet d'accéder à différentes propriétés et méthodes concernant une fenêtre  web.

L'objet window comme "fenêtre" (qui n'a rien à voir avec windows de Microsoft) constitue la racine de l'arbre DOM . Toutes les propriétés, méthodes et autres objets seront toujours référencés par rapport à cet objet de base.
Par exemple pour accéder à des éléments de l'objet document nous partons de l'objet window ensuite nous accédons à l'objet document et par là même à ses éléments et sous éléments.
La notation de ce mode objet est toujours de la forme suivantes :

window.objet_x.objet_y .élément_A.élément_B.propriétés (Chaque partie de l'expression est séparée par un point.)

• objet_x fait partie de window
• objet_y fait partie de objet_x
• élément_A fait partie de l'objet_Y
• élément_B fait partie de l'élément_A
• Propriété est la propriété relative à l'élément_B

Comme toutes les propriétés ou objets dépendent de la racine window qui est donc la racine par défaut, il est fréquent que les concepteurs de pages Internet l'omettent et code l'exemple précédent de la manière suivante :
objet_x.objet_y .élément_A.élément_B.propriétés

Toutefois pour une meilleure visibilité du code HTML, la bonne habitude consiste à le préciser systématiquement ( on verra pourquoi dans la fiche popup ).

Javascript et interaction avec le DOM

Généralités

Cet exemple simple montre comment à partir d'un click de souris on peut interagir  sur le contenu de certains éléments, sur la couleur de la police de caractères ou sur la couleur de fond d'un élément. En fait on le verra ultérieurement on peut agir sur la présentation (couleur, style, position, image d'arrière plan etc..) de n'importe quel élément HTML même lorsque la page est complètement chargée.

Le principe général est le suivant :

Exemple

L'exemple suivant utilise des instructions javascript que nous verrons plus en détails dans les fiches javascript. Même si ces instructions paraissent un peu obscures pour le moment, cela donne une idée du mécanisme général et illustre le principe décrit ci-dessus.

Commentaires sur l'exemple

 Détection de l'évènement onclick sur une des cellules du tableau (+ ou -)

<td class="green" onclick="compte('plus')" title="Cliquer pour incrémenter le compteur">+</td>

Sur cet évènement appel de la fonction compte() avec le paramètre ‘plus’ ou ‘moins‘ et exécution des instructions contenues dans cette fonction.

<td class="green" onclick="compte('plus')" title="Cliquer pour incrémenter le compteur">+</td>

L’interface de communication HTML de javascript comprend la commande window.document.getElementById("Resultat") qui permet d’accéder via la structure DOM à l’élément HTML référencé par l’identificateur ‘Resultat’ (<div id="Resultat">Compteur : 0</div>). Associé à cette commande la méthode .innerHTML permet de remplacer dynamiquement le contenu du div par un nouveau contenu correspondant à la nouvelle valeur du compteur :
window.document.getElementById("Resultat").innerHTML = nouveau contenu

D’autres méthodes sont ici utilisées comme : .style.backgroundColor = nouvelle couleur de fond ou . style.Color = nouvelle couleur de la police de caractère.