Etablissement : ISET Charguia Département : Technologies de l’Informatique

Matière : Atelier Dév Web et Multimédia 2 Classe : TI 107

Année Universitaire : 2019 - 2020

TP n° 5 : Le DOM : Document Object Model

Objectifs du TP :
- Comprendre comment accéder aux différents éléments du DOM
- Apporter des modifications à la structure et au contenu du DOM en utilisant les différentes
méthodes
- Apporter des modifications de mise en forme à un document HTML

N.B : L’ensemble des exercices doivent être placés dans un répertoire nommé « TP5 » placé
sous un répertoire portant votre nom, prénom et classe.

Exercice 1 :
Soit la page html suivante à partir de laquelle on souhaite effectuer des statistiques :

<h1> Pandémie du Coronavirus dans le Monde </h1>

<h2> Pays les plus touchés </h2>
<ol><li id="first">USA</li><li>Espagne</li><li>Italie</li><li>
France</li></ol>
<h2> Cas en Tunisie le 18/04/2020 </h2>
<ul>
<li> Nombre de cas: <strong>866 </strong></li>
<li> Nombre de tests effectués: <span
class="c1">15332</span> </li>
<li> Nombre de décès: <strong>37 </strong></li>
</ul>

<hr/>
<h2> Statistiques </h2>
…. Figure 1: Page "EX1.html"

En cliquant à chaque fois sur l’un des boutons radio, le résultat demandé est affiché dans la
zone de texte.
1. Ecrire une fonction javascript paysContamines() qui :
• Affiche dans la zone de texte les pays les plus touchés par le Coronavirus selon
le format suivant :
• Affiche les mêmes informations dans la fenêtre de console en utilisant une
méthode du DOM différente

TP5 Développement Web et Multimédia 2 A.U 2019-2020 1

 2. Ecrire une fonction javascript paysEuropeen () qui :
• Affiche dans la zone de texte le pays Européen qui est le plus touché par le
coronavirus
• Affiche la même information dans la fenêtre console en utilisant une méthode
différente
3. Ecrire une fonction javascript nbCas () qui affiche dans la zone de texte le nombre de
cas de contaminations en Tunisie (uniquement le nombre)
4. Ecrire une fonction javascript nbDeces () qui affiche dans la zone de texte le nombre de
décés en Tunisie (uniquement le nombre)
5. Ecrire une fonction javascript nbTests () qui affiche dans la zone de texte le nombre de
tests effectués en Tunisie (uniquement le nombre)
N.B : pour les questions 3, 4 et 5 vous devez utiliser des méthodes du DOM différentes
6. Compléter le code html relatif aux statistiques en faisant appel aux différents
gestionnaires d’événements pour répondre au fonctionnement demandé.

Exercice 2 :

On souhaite créer dynamiquement une liste de courses qui ne comporte initialement que le lait
et le pain. A chaque fois que l’utilisateur introduit un article et clique sur le bouton « Ajouter »,
l’article est ajouté à la liste.

Figure 2: Page "EX2.tml"

Ecrire la page « EX2.html » qui répond au fonctionnement demandé.

Exercice 3 :

On souhaite créer la page « EX3.html » dont le code qui suit doit être ajouté à une division
existante : <div id="code"> </div>
<div id="maDivision">
<form name="frm" action="next.php" method="post">
<fieldset>
<legend> Forumulaire d'inscription</legend>
Donnez votre nom<input type="text" name="txtNom" />
<br/>
<input type="submit" value="Envoyer" />
</fieldset>
</form>
</div>
Ecrire un script permettant de créer le code html demandé en utilisant le DOM.

TP5 Développement Web et Multimédia 2 A.U 2019-2020 2

Exercice 4 :

Soit la page « EX4.html » suivante :

Figure 3: Page "EX4.html"

Le code html correspondant est le suivant :

<form name="f">
<h1> Développement web </h1>
<p> Le développement web exige des connaissances en <span>HTML</span>,
<span>CSS</span> et <span>Javascript</span> </p>
</form>
On souhaite que :
• Un clic sur le titre de la page permet de le centrer, un nouveau clic sur le titre remet le
titre à sa position initiale
• Un clic sur l’un des 3 termes clés HTML, CSS ou Javascript permet de colorer en rouge
le terme cliqué. Un nouveau clic rend le terme en noir
Ainsi, si on clique sur le titre et le terme CSS, on obtiendrait ce rendu :

Figure 4: "EX4.html" après un clic sur le titre et le mot CSS

Ecrire la page « EX4.html » qui répond au fonctionnement demandé en utilisant :

• La méthode setAttribute(nomAttribut, valeur) pour associer les propriétés de mise en
forme de centrage ou de coloration
• La méthode removeAttribute(nomAttribut) pour supprimer l’attribut affecté à un
élément
• La méthode hasAttribute(nomAttribut) qui renvoie si un élément possède l’attribut
donné ou non

Exercice 5 :

Soit la page « EX5.html » suivante à partir de laquelle on souhaite apporter un ensemble

d’opérations :
1. Insertion d’un fruit saisi dans la zone de texte avant les oranges
2. Insertion d’un fruit en première position des fruits de saison
3. Insertion d’un fruit à la fin de la liste des fruits d’été
4. Suppression de la pêche (le bouton correspondant devient désactivé)
5. Remplacement des pommes par le fruit introduit dans la zone de texte (le bouton devient
désactivé)
6. Réinitialisation de la page à son état initial

TP5 Développement Web et Multimédia 2 A.U 2019-2020 3

 Figure 5:Etat initial de la page Figure 6: Etat de la page après quelques opérations

Initialement, le code source de la page est donné comme suit :

<body>
<h1> Les fruits de saison </h1>
<div id="div1">
<p> Les fruits changent chaque saison </p>
<ul>
<li> Fruits de saison
<ul>
<li> Fraises </li>
<li id="org"> Oranges </li>
</ul>
</li>
<li> Fruits d'été
<ol>
<li> Melon </li>
<li> Pêche </li>
<li class="c1"> Pastèque </li>
</ol>
</li>
<li> Autres fruits
<p>On peut avoir aussi des <span> bananes </span>, des
<span class="c1"> pommes </span>,...
</p>
</li>
</ul>
</div>
…
</body>

1. Ecrire les scripts nécessaires pour répondre aux différentes opérations mentionnées
2. Compléter la page html pour répondre au fonctionnement demandé

TP5 Développement Web et Multimédia 2 A.U 2019-2020 4