Manipulation du DOM

Exercice 1 — Expérimenter avec le DOM #

https://dev-LOGIN.users.info.unicaen.fr/TW2-2025/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. Modifier et/ou déplacer la balise script pour que cela fonctionne. Attention, il faut que votre code HTML soit toujours valide.

Tests

Des tests vérifient que vos fonctions sont correctes. Attention, elles ne sont pas infaillibles, demandez de l'aide si vous avez un doute.

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

Il est important 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. getUneListe qui renvoie l'élément d'identifiant une-liste
2. getPremierPara qui renvoie le premier paragraphe de la page
3. getTexteLi qui renvoie le contenu textuel du premier élément li
4. getH2Demarrage qui renvoie le premier h2 de classe demarrage
5. getTexteH2Demarrage qui renvoie son contenu textuel
6. getEmphase qui renvoie le premier em contenu dans un paragraphe
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 de la première illustration)
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. getTousLesFils qui renvoie la liste des éléments fils de body
12. getTousAvant qui renvoie la liste des éléments de classe mise-en-avant
13. compteParaPremiere qui renvoie le nombre de paragraphes dans la division div-premiere
14. comptePara qui renvoie le nombre de paragraphes dans la page
15. compteParaDansDivision 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. modifPara 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. modifImage qui change la source de l'image de la 2^e partie (mettre l'image mit.jpg), et change le texte de l'attribut alt (mettre le texte Le Stata Center du MIT)
3. modifLegende qui modifie le texte de la légende de l'image de la 2^e partie
4. modifItem qui change le texte du premier item de la liste à puce de la 2^e partie
5. supprimePara qui supprime le premier paragraphe de la 2^e partie
6. supprimeDernierItem qui supprime le dernier 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 (boucle for) pour agir individuellement sur chaque élément de la liste.

Attention rappel tableaux et boucles for en JS

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. mettreBordure qui met une bordure continue noire de 1px sur tous les éléments h3 de la partie 3
2. coloreItems qui mettre tous les items de liste de la partie 3 en texte rouge sur fond jaune et leur met une margin de 15px.
   Attention si vous n'avez pas de blanc entre les items alors ce n'est pas correct
3. supprimeDom qui supprime les items de liste qui appartiennent à classe la-classe-dom
4. supprimeGras qui supprime tous les éléments strong (et leur texte) qui sont dans le paragraphe d'identifiant gras
5. enleveUneClasse qui, pour tout élément ayant les classes la-classe-dom ET mise-en-avant, leur enlève seulement la classe mise-en-avant (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 (sans espace)
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 liste-numeros avec le texte mon code a ajouté cet item de liste
2. insereTitre 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. inserePara qui ajoute un paragraphe avant la liste liste-numeros et lui met le texte le paragraphe ajouté
4. insereArbre qui crée tout le sous-arbre qui correspond au HTML ci-dessous puis l'ajoute à la page après la division d'identifiant derniere déjà présente dans la page.
   Attention pour que les tests passent il faut que le texte soit exactement le même que ce qui est donnée ci-dessous :
   

   
       <div class="mise-en-avant">
           <h2>Une division créée en Javascript</h2>
           <footer>Un footer avec <a href="https://google.com">un lien Google</a>
                   qui ne sert à rien</footer>
       </div>
           

5. cloneListe 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.