Manipulation du DOM

Exercice 1 — Expérimenter avec le DOM #

https://dev-LOGIN.users.info.unicaen.fr/TW2-2026/TP03/ex1/dom.html

<meta name="author" content="LOGINS" />

L'archive tp3.zip contient une page web dom.html, un fichier Javascript dom.js et 2 images.

Help! pensez à consulter la page de cours.

Préliminaire : faire fonctionner le script

1. Démarrage : le code qui prend l'élément d'identifiant paragraphe et l'affiche en console est déjà écrit dans le fichier dom.js. Mais ça affiche null au lieu de l'élément <p>.
   Pourquoi cela ne marche-t-il pas ?
2. Déplacer la balise <script src="dom.js"></script> et la placer en fin de body. Attention, il faut la mettre avant la fermeture </body> sinon votre page ne sera plus valide.
   Tester à nouveau. Pourquoi cela marche-t-il maintenant ?

Partie 1 : obtenir des données de l'arbre DOM

Il est important ici de bien comprendre la différence entre querySelector et querySelectorAll.

Attention chaque fonction doit faire un return de ce qui est demandé, puis faire un console.log qui appelle la fonction et affiche donc son résultat.

Écrire les fonctions :

1. getListe qui renvoie l'élément d'identifiant liste1
2. getPara qui renvoie le premier paragraphe de la page
3. getTextePara qui renvoie le contenu textuel du premier paragraphe
4. getH2Debut qui renvoie le premier h2 de classe debut
5. getTexteH2Debut qui renvoie son contenu textuel
6. getEmphase qui renvoie le premier em contenu dans un li
7. getTexteEmphase qui renvoie son contenu textuel
8. getPremierFils qui renvoie le premier élément fils de la première figure (ce doit être l'élément image)
9. getSource qui renvoie la valeur de l'attribut src de l'élément obtenu à la question précédente
10. getAlt qui renvoie la valeur de l'attribut alt de l'élément obtenu à la question 8
11. getFilsBody qui renvoie la liste des éléments fils de body
12. getTousImportant qui renvoie la liste des éléments de classe important
13. getParaDiv1 qui renvoie le nombre de paragraphes dans la division div1
14. comptePara qui renvoie le nombre de paragraphes dans la page
15. compteParaInDiv qui renvoie le nombre de paragraphes dans une division
16. Ajouter un console.log("------------------------------");.

Partie 2 : modifier un élément de la page

Toutes les modifications doivent être faites via Javascript, interdiction de toucher au code du fichier HTML !

Les fonctions à écrire vont ici agir directement sur la page, elles n'ont donc pas de valeur de retour et il n'y a rien à afficher, les modifications faites doivent se voir sur la page. Pour cela, pensez à appeler la fonction pour qu'elle s'exécute !

Écrire les fonctions :

1. changePara qui obtient l'élément d'identifiant paragraphe et le met dans une variable, puis qui va faire les modifications suivantes sur ce paragraphe :
   1. Mettre une largeur de 600px et mettre le texte en rouge et en taille 26px
   2. Modifier le contenu textuel du paragraphe
   3. Ajouter un attribut title au paragraphe (y mettre le texte de votre choix)
2. changeImage qui change la source de l'image de la 2^e partie (mettre l'image souris1968.jpg), et change le texte de l'attribut alt (mettre le texte une souris en 1968)
3. changeLegende qui modifie le texte de la légende de l'image de la 2^e partie
4. changeItem qui change le texte du dernier item de la liste à puce de la 2^e partie
5. supprimePara qui supprime le premier paragraphe de la 2^e partie
6. supprimePremierItem qui supprime le premier item de la liste de la liste à puce de la 2^e partie
7. Ajouter un console.log("------------------------------");.

Partie 3 : modifier tout un ensemble d'éléments

Rappel de cours : l'utilisation de querySelectorAll renvoie une liste d'éléments (liste éventuellement vide). Une liste n'étant pas un élément, on ne peut pas utiliser directement les méthodes de la partie précédente.

Il faudra donc parcourir ces listes d'éléments (bouche for) pour agir individuellement sur chaque élément de la liste.

Pour cette partie, les fonctions à écrire vont de nouveau agir directement sur la page, elles n'ont donc pas de valeur de retour et il n'y a rien à afficher, les modifications faites doivent se voir sur la page. Pour cela, pensez à appeler la fonction pour qu'elle s'exécute !

Écrire les fonctions :

1. ajouteBordure qui met une bordure continue noire de 1px sur tous les éléments h2 de la partie 3
2. changeTousItems qui mettre tous les items de liste de la partie 3 en texte blanc sur fond noir et leur met une margin de 10px.
   Attention si vous n'avez pas de blanc entre les items alors ce n'est pas correct
3. supprimeExoDom qui supprime les items de liste qui appartiennent à classe exo-dom
4. supprimeGras qui supprime tous les éléments strong (et leur texte) qui sont dans le paragraphe d'identifiant gras
5. enleveImportant qui, pour tout élément ayant les classes exo-dom ET important, leur enlève la classe important (il ne doit alors plus y avoir d'éléments en bleu).
   Penser à utiliser classList
   Rappel : le sélecteur CSS pour les éléments ayant les classes toto et titi est .toto.titi
6. Ajouter un console.log("------------------------------");.

Partie 4 : ajouter des éléments dans la page

Pour cette partie, les fonctions à écrire vont de nouveau agir directement sur la page, elles n'ont donc pas de valeur de retour et il n'y a rien à afficher, les modifications faites doivent se voir sur la page. Pour cela, pensez à appeler la fonction pour qu'elle s'exécute !

Écrire les fonctions :

1. ajouteItem qui ajoute un item à la fin de la liste listeEnPlus avec le texte un item en plus
2. ajouteTitre qui ajoute un titre de niveau 1 au tout début de la page (en premier fils de body) et lui met le texte un nouveau titre
3. ajoutePara qui ajoute un paragraphe avant la liste listeEnPlus et lui met le texte nouveau paragraphe
4. ajouteArbre qui crée tout le sous-arbre qui correspond au HTML ci-dessous puis l'ajoute à la page après la division lafin déjà présente dans la page.

   
       <div class="important">
           <h3>Une division créée en Javascript</h3>
           <div>Une division avec <a href="https://google.com">un lien Google</a>
                   qui ne sert à rien</div>
       </div>
           

5. dupliqueListe qui duplique la liste à puce présente dans la partie 4, ajoute cette copie à la fin de la page (elle doit donc être en-dessous du dernier cadre) et lui ajoute la classe nouvelle (elle doit alors être en vert).
   Attention, vérifiez bien que la liste à puce initiale n'a pas disparu.