Institut Supérieur des Etudes Technologiques de Zaghouan
Département de Technologies de l'Informatique
Classe : TI11-TI12 Enseignante: Sawsen BEN NASR
Matière : Atelier Développement Web et Multimédia II Année Universitaire : 2015/2016
TP N°3 : DOM
Exercice 1:
Utilisez le fichier [Link] dans lequel vous aurez à insérer votre code JavaScript.
Créer une fonction appelée en cliquant sur le bouton Modifier le paragraphe. 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 emphase.
Créer une fonction appelée en cliquant sur le bouton Centrer le titre. Cette fonction détecte
d'abord les éléments portant le nom de balise h1. Elle sélectionne ensuite le premier d'entre
eux (ça tombe bien, il n'y en a qu'un seul sur la page !), et modifie son attribut align, en lui
affectant la valeur "center", à l'aide de la méthode setAttribute... dont vous testerez le
fonctionnement.
Exercice 2 :
Utilisez le fichier [Link] dans lequel vous aurez à insérer votre code JavaScript.
1- La fonction change_enfants() sélectionne le paragraphe à l'aide de son identifiant.
2- Combien d'enfants le paragraphe a-t'il ?
3- Changer la valeur du premier enfant de l'élément paragraphe en "On change le texte
plein d'enfants ".
4- Diviser par deux les hauteur et largeur de l'image (le dernier enfant).
5- Changer le code HTML du deuxième enfant en "<font color='blue'>en bleu</font>"
6- Changer la propriété display de style du quatrième enfant en "block".
Exercice 3 :
Utilisez le fichier [Link] dans lequel vous aurez à insérer votre code JavaScript.
Au sein du <div id="output"> se trouvent un noeud #text et un lien <a href="#">. Ce lien ne
mène nulle part puisqu'il vaut #. Il faudrait donc modifier son attribut href pour le faire
pointer vers [Link]
Terminer le code pour que le click sur le bouton lance une fonction qui fait cette
modification.
Exercice 4 :
Utilisez le fichier [Link] dans lequel vous aurez à insérer votre code JavaScript.
Au sein du <div id="output"> se trouve une petite citation d'Albert Einstein. Ce qu'il faudrait,
c'est mettre cette citation dans un élément <blockquote> en utilisant innerHTML.
Sawsen BEN NASR Page 1
Exercice 5 :
Utilisez le fichier [Link] dans lequel vous aurez à insérer votre code JavaScript.
Récupérer l'objet de liste à l'aide d'une méthode getElementsByTagName.
Récupérer la collection d'items de liste à l'aide d'une méthode getElementsByTagName.
Changer la valeur de l'attribut de type de la liste en "circle".
Pour chaque élément de liste, changer le texte en "blabla", et affecter à l'attribut onclick un
appel à une boîte d'alerte avec un petit texte.
Exercice 6:
A- Utilisez le fichier [Link] dans lequel vous aurez à insérer votre code JavaScript.
Sélectionner la liste d'identifiant "listecommissions".
Créer un nouvel item de liste et lui affecter un texte.
Ajouter ce nouvel élément de liste à la liste
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.
C- Ajouter un bouton permettant, par un appel de fonction, de supprimer le dernier
élément de la liste.
Que se passe-t-il quand on essaie de supprimer un élément de la liste lorsque celle-ci
est vide ? Corriger le code pour éviter cette erreur.
Sawsen BEN NASR Page 2