ATELIER N°4:LE DOCUMENT OBJECT MODEL (DOM)
OBJECTIFS
A la fin de ce TP, les étudiants auront les connaissances nécessaires pour écrire du code
JavaScript s'appuyant sur l'utilisation des concepts de DOM.
VOLUME HORAIRE : 3 HEURES
EXERCICE N°1 :
Utiliser une structure DOM pour écrire une page web permettant de créer un lien pointant vers la
page de [Link] en cliquant sur le texte Lien vers gmail, et ce de deux manières :
a) en utilisant getElementsByTagName()
b) en utilisant querySelector()
EXERCICE N°2:
Afin de s'entraîner à créer avec le DOM, on vous donne le code HTML suivant et on vous demande
de recréer cette structure en utilisant le DOM en Javascript.
Le code que vous devez recréer est le suivant :
<div id="divEX2">
Le <strong>World Wide Web Consortium</strong>, abrégé par le sigle
<strong>W3C</strong>, est un
<a href="[Link]
title="Organisme de normalisation">
organisme de standardisation</a> à but non-lucratif chargé de
promouvoir la compatibilité des technologies du <a
href="[Link] title="World Wide
Web">World Wide Web</a>.
</div>
Mme Gannar S. 1
EXERCICE N°3 :
On vous donne le code HTML suivant et on vous demande de recréer cette structure en utilisant le
DOM en Javascript.
<div id="divEx3">
<p>Langages basés sur ECMAScript :</p>
<ul>
<li>JavaScript</li>
<li>JScript</li>
<li>ActionScript</li>
<li>EX3</li>
</ul>
</div>
EXERCICE N°4 :
L'objectif de cet exercice consiste à pouvoir accéder aux éléments à partir de l'ensemble du
document. On tentera de travailler avec les méthodes getElementById,
getElementsByName et getElementsByTagName.
Travail demandé :
1. Créer une fonction modif_paragraphe, appelée en cliquant sur le titre. Cette fonction
sélectionne le paragraphe en utilisant son identifiant, puis le modifie avec la propriété
innerHTML, en remplaçant le mot original en caractères droit par le mot corrigé, en
caractère italique.
2. Créer une fonction centrage_h1, appelée en cliquant sur le premier paragraphe. Cette
fonction détecte d'abord les éléments portant le nom de balise h1. Elle sélectionne ensuite le
premier d'entre eux, dans notre cas, il n'y en a qu'un seul paragraphe sur la page, et modifie
son attribut align, en lui affectant la valeur "center", à l'aide de la méthode
setAttribute.
EXERCICE N°5 :
Ecrire un Script en utilisant le DOM faisant en sorte que quand on clique sur un bouton (Cliquez-
moi), il affiche Vous m'avez cliqué.
EXERCICE N°6 :
L'objectif de cet exercice consiste à pouvoir changer les puces d'une liste non numérotée en
« circle » ainsi que les éléments de la liste par « Bonjour ». Pour cela, on vous demande de :
1. Récupérer l'objet de liste à l'aide d'une méthode getElementsByTagName.
2. Récupérer la collection d'items de liste à l'aide d'une méthode getElementsByTagName.
3. Changer la valeur de l'attribut de type de la liste en "circle".
Mme Gannar S. 2
4. Pour chaque élément de liste, changer le texte en "bonjour" et affecter à l'attribut onclick
un appel à une boîte d'alerte avec le texte « Bon Travail »
EXERCICE N°7 :
a. L'objectif de cet exercice consiste à pouvoir ajouter, à chaque clic, un élément à une liste
d'ingrédients déjà existante constituée de 1kg de Farine, 1 verre de lait.
b. Modifier le code en ajoutant un champ de saisie de texte et un bouton de validation. Le texte
ajouté à la liste devra être saisi dans le champ de saisie.
Mme Gannar S. 3