Modifier le DOM avec JavaScript

Licence Informatique, semestre 6

Alexandre NiveauJean-Marc Lecarpentier — Judith Jeyafreeda Andrew

Enseignement des technologies du Web

 

Modifier le DOM avec JavaScript

Notes de cours

Travail personnel

Objectifs

Ce TP vise à vous (re-)familiariser avec JavaScript et la manipulation du DOM. Il doit être fait sans utiliser de bibliothèque externe : en particulier, si vous avez l'habitude d'utiliser jQuery, c'est l'occasion de vous replonger dans le JavaScript de base.

Exercice 1 — Expérimenter avec le DOM #

Exercice de Jean-Marc Lecarpentier

Une proposition de correction de cet exercice est disponible. Pour la plupart des questions plusieurs façons de faire sont possibles.

L'archive dom.zip contient une page web dom.html, une image et un fichier JavaScript dom.js (quasi-)vide. Décompresser l'archive sur votre espace web, et vérifier que l'image s'affiche correctement.

Appel du script

La page HTML n'est pas associée au script. Commencer par ajouter l'appel au script dans l'en-tête du HTML. Vous devriez obtenir un pop-up si vous rechargez la page : le message doit indiquer que le DOM a bien été créé. Si ce n'est pas le cas, corriger l'appel au script uniquement, ne modifiez pas le contenu du script !

Manipulation du DOM

Dans la suite de l'exercice, vous devez compléter le script 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).

NB : il est recommandé de ne pas utiliser les méthodes getElementsByTagName et getElementsByClassName, que vous trouverez souvent dans les exemples et tutos sur le web, car elles renvoient une collection « vivante » d'éléments (voir cours). En plus d'être plus générales, querySelector et querySelectorAll n'ont pas cet inconvénient.

  • 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ésultat ?
    • 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 chaque 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 propriété src de l'objet obtenu. Quelle est la différence par rapport à l'attribut src écrit dans le HTML ?
    • Afficher en console la valeur de l'attribut src de l'élément, tel qu'écrit dans le HTML.
    • Afficher en console la liste des noms des attributs de l'élément
    • 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
  • Supprimer le dernier item de la liste d'identifiant liste1
  • Ajouter un item à la fin de la liste ul
  • Ajouter un titre de niveau 1 au tout début de la page (en premier fils de body)
  • Ajouter un paragraphe avant l'élément figure

Exercice 2 — Notes de bas de page #

Une proposition de correction partielle est disponible.

Récupérer cette page HTML (archive). Certains morceaux du texte sont considérés comme des notes de bas de page : ils sont simplement entourés d'un span avec une classe note. Nous allons écrire le code JavaScript permettant de gérer ces notes.

  1. Faire en sorte que les notes n'apparaissent pas dans le texte, mais en dessous, avec des numéros et une police de taille réduite.
  2. Ajouter dans le texte des liens vers les notes (par exemple sous forme d'exposant, ou avec des crochets) ; ajouter dans chaque note un lien pour revenir à l'appel de la note dans le texte.
  3. Lors du chargement de la page, demander à l'internaute (avec un prompt) le mode d'affichage désiré : notes supprimées, notes en bas de page, ou notes laissées dans le texte avec des parenthèses autour. Pour faire cela proprement, il faudra prévoir trois fonctions différentes de traitement des notes, et appeler la bonne suite en fonction de ce que renvoie le prompt.
  4. Optionnel : ajouter un mode « notes de marge », dans lequel chaque note est affichée en petit, dans une des marges, au niveau de l'appel de note correspondant.