Manipulation du DOM

Licence Informatique 1e année

Alexandre NiveauJean-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/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="NUMETUS" />
en remplaçant NUMETUS par les numéros 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 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,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 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).

  • Obtenir l'élément d'identifiant paragraphe et le mettre dans une variable, puis 
    • Afficher en console cet élément et son type de balise.
    • Mettre le texte en rouge avec la propriété style.
    • Afficher en console la liste des fils de type Node puis de type Element et expliquer la différence.
  • Afficher en console :
    • le nombre d'éléments li de la page
    • le nombre d'éléments li contenus dans un élément ul
    • 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 ?
    • le nombre de fils de type Element des listes d'identifiant liste1 et liste2. Pourquoi cette fois le résultat est-il identique ?
    • le premier et le dernier fils de type Node puis le premier et dernier fils de type Element (pour chque liste)
  • Mettre en rouge la légende de l'image
  • Agrandir la taille du texte du dernier paragraphe et lui mettre une largeur de 800px
  • Obtenir l'élément img (penser à querySelector) et le mettre dans une variable, puis
    • Afficher en console la valeur de l'attribut alt
    • Afficher en console la liste des noms de ses attributs
    • Afficher en console si l'élément a un attribut title
    • Modifier la source de l'image (par exemple mettre https://ensweb.users.info.unicaen.fr/images/premiere_souris_1968.jpg)
    • Supprimer l'attribut width de l'image
  • Afficher en console le nombre d'éléments appartenant à la classe elt-test.
  • 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.
  • Modifier le texte de la légende de l'image

Exercice 2 (optionnel) — Des couleurs au DOM #

Cet exercice sera repris dans le TP 4.

L'archive couleurs.zip contient une page web couleurs.html dans laquelle un script contient la liste de couleurs suivantes dans un objet :

 let mesCouleurs = {
    "red" : "#f00",
    "green" : "#0f0",
    "blue" : "#00f",
    "cyan" : "#0ff",
    "magenta" : "#f0f",
    "yellow" : "#ff0",
    "black" : "#000"
}

Parcourir les propriétés de l'objet mesCouleurs pour créer l'affichage des couleurs et de leurs noms, par exemple :
couleurs JSON

Remarque : pour itérer sur les propriétés d'un objet, on peut utiliser for (let key in object) et on accède à la valeur de la propriété en faisant object[key]. Voir la documentation