Manipulation du DOM

Licence Informatique 1ère année

Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Lors de cette séance, on utilise JavaScript pour modifier une page web, en utilisant l'API du DOM.

Notes de cours

Exercice 1 — Expérimenter avec le DOM #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante : 

https://dev-LOGIN.users.info.unicaen.fr/TW2-2024/TP03/ex1/dom.html
(en remplaçant LOGIN par votre identifiant numérique). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="LOGIN" />
en remplaçant LOGIN par les identifiants des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si lecarp213 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="lecarp213,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

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 2e 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 2e partie
  4. changeItem qui change le texte du dernier item de la liste à puce de la 2e partie
  5. supprimePara qui supprime le premier paragraphe de la 2e partie
  6. supprimePremierItem qui supprime le premier item de la liste de la liste à puce de la 2e 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.