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-NUMETU.users.info.unicaen.fr/2020/TW2/TP03/ex1/dom.html
(en remplaçant NUMETU par le numéro correspondant). 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="NUMETU" />
en remplaçant NUMETU par votre numéro étudiant. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si votre numéro est 21012343, vous mettez <meta name="author" content="21012343" /> dans le head de votre page. Pour cet exercice, il est interdit de travailler en binôme.

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 dom.zip contient une page web dom.html et un fichier Javascript dom.js.

Compléter la fonction testerDom() pour exécuter les points ci-dessous. Vous ne pouvez pas modifier le HTML !

Help! vous pourrez vous référer à la documentation de Element pour agir sur les éléments HTML et à la documentation de documentation de Node pour agir sur les noeuds de l'arbre en général (noeuds de texte OU noeuds éléments HTML).

  1. Obtenir l'élément d'identifiant paragraphe et le mettre dans une variable, puis 
    1. Afficher en console cet élément et son type de balise.
    2. Mettre le texte en rouge avec la propriété style.
    3. Afficher en console la liste des fils de type Node puis de type Element et expliquer la différence.
  2. Afficher en console :
    1. le nombre d'éléments li de la page
    2. le nombre d'éléments li contenus dans un élément ul
    3. le nombre de fils de type Node des listes d'identifiant liste1 et liste2. Pourquoi n'a-t-on pas le même résultats ?
    4. le nombre de fils de type Element des listes d'identifiant liste1 et liste2. Pourquoi cette fois le résultat est-il identique ?
    5. le premier et le dernier fils de type Node puis le premier et dernier fils de type Element (pour chque liste)
  3. Mettre en rouge la légende de l'image
  4. Agrandir la taille du texte du dernier paragraphe et lui mettre une largeur de 800px
  5. Obtenir l'élément img (penser à querySelector) et le mettre dans une variable, puis
    1. Afficher en console la valeur de l'attribut alt
    2. Afficher en console la liste des noms de ses attributs (voir la propriété attributes)
    3. Afficher en console si l'élément a un attribut title (voir la méthode hasAttribute())
    4. Modifier la source de l'image (par exemple mettre https://ensweb.users.info.unicaen.fr/images/premiere_souris_1968.jpg)
    5. Supprimer l'attribut width de l'image
  6. Afficher en console le nombre d'éléments appartenant à la classe elt-test.
  7. Pour tout élement ayant les classes elt-test ET laclasse, lui supprimer la classe laclasse.
    Indication : penser à utiliser classList.
    On doit voir que le 2e li de la page et le paragraphe avant l'image ne sont plus en bleu.
  8. Modifier le texte de la légende de l'image

Questions pour les plus rapides (non obligatoires à rendre)

  1. Supprimer le dernier item de la liste d'identifiant liste1
  2. Ajouter un item à la fin de la liste ul
  3. Ajouter un titre de niveau 1 au tout début de la page (en premier fils de body)
  4. Ajouter un paragraphe avant l'élément figure