Manipulation du DOM

Exercice 1 — Expérimenter avec le DOM #

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

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

L'archive dom.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 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.

Afficher en console :

1. l'élément d'identifiant liste1
2. le premier paragraphe de la page puis son contenu textuel
3. le premier h2 de classe important puis son contenu textuel
4. le premier em contenu dans un li puis son contenu textuel
5. le premier élément fils de figure (ce doit être l'élément image), puis la valeur de ses attributs src puis alt
6. la liste des éléments fils de body
7. la liste des éléments de classe important
8. le nombre de paragraphes dans la page, puis le nombre de paragraphes dans la division
9. Ajouter un console.log("------------------------------");.

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

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

1. Obtenir l'élément d'identifiant paragraphe et le mettre dans une variable, puis 
   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. Changer la source de l'image (utiliser l'image souris1968.jpg) et changer le texte de l'attribut alt (mettre une souris en 1968)
3. Modifier le texte de la légende de l'image
4. Modifier le contenu textuel du dernier item de la liste à puces
5. Supprimer le premier paragraphe de la page
6. Supprimer le dernier item de la liste numérotée liste1
7. Ajouter un console.log("------------------------------");.

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

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.

1. Mettre une bordure sur tous les éléments h2 de la page
2. Mettre tous les items de la liste à puce en couleur blanc sur fond noir et leur mettre un margin de 10px.
   Attention si vous n'avez pas de blanc entre les items alors ce n'est pas correct
3. Supprimer les items de liste de classe exo-dom
4. Pour tout élément ayant les classes exo-dom ET important, leur supprimer 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
5. Ajouter un console.log("------------------------------");.

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

1. Ajouter un item à la fin de la liste ul
2. Ajouter un titre de niveau 1 au tout début de la page (en premier fils de body)
3. Ajouter un paragraphe avant l'élément figure
4. Créer tout le sous-arbre qui correspond au HTML ci-dessous puis l'ajouter à la page après la division déjà présente dans la page.

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