Aller au contenu

Manipulation du DOM

Matière à connaître

DOM

Le DOM c'est le code HTML interprété par le navigateur.

Attribut

En HTML, un attribut c'est une information supplémentaire sur une balise (tag).

<p id="un-beau-bonjour" class="des belles classes">Bonjour</p>
<!-- id et class sont des attributs -->
Sélecteur

Un sélecteur c'est une façon de sélectionner des éléments du DOM.

Certains sélecteurs sélectionnent un élément à la fois, d'autres sélectionnent plusieurs éléments.

// Sélectionne UN SEUL élément par son attribut `id`.
let maSelectionA = document.getElementById(id);

// Sélectionne le premier élément qui correspond au sélecteur CSS donné.
let maSelectionB = document.querySelector(selecteur_css);

// Sélectionne tous les éléments qui correspondent au sélecteur CSS. Retourne une liste!
let maSelectionC = document.querySelectorAll(selecteur_css);
Sélecteur CSS

Un sélecteur CSS s'écrit de la même manière qu'en CSS.

let maSelection = document.querySelector('.container p:first-child');
Manipulation
Modifier la sélection
maSelection.innerHTML = "Nouveau contenu";
Supprimer la sélection
maSelection.remove();

Objectif

Manipuler le DOM pour ajouter, modifier et supprimer des éléments sur la page.

Résultat attendu

Instructions

Étape 1

Dans le fichier index.html :

  • Ajouter le code HTML suivant :

    <h2 id="title">Liste de films</h2>
<ul id="films">
  <li class="film" data-annee="1979">Alien</li>
  <li class="film" data-annee="1988">Akira</li>
  <li class="film" data-annee="1982">Blade runner</li>
  <li class="film" data-annee="2021">Dune</li>
  <li class="film" data-annee="2001">Spirited Away</li>
</ul>

Dans le fichier script.js :

  • Créer une constante films qui contient toutes les balises li de la liste de films

  • À l'aide d'une boucle for, ajouter l'année après chaque titre de film (ex : Alien (1979)). L'année se trouve dans l'attribut data-annee de chaque balise li.

    Indice

    getAttribute() permet de récupérer la valeur d'un attribut HTML.

  • Vérifier dans le navigateur (sur la page, pas dans la console) que les 5 films affichent leur année
  • Effectuer un commit avec le message « Afficher les années »

Étape 2

  • À l'aide d'une deuxième boucle for, ajouter la classe CSS prehistorique aux films réalisés avant l'an 2000

    Indices
    • classList.add() sert à ajouter une classe à une balise HTML
    • La valeur d'un attribut est toujours du texte. Pour la comparer à un nombre, il faut d'abord la convertir avec Number()

Dans un nouveau fichier style.css :

  • Ajouter un style de votre choix (ex. : couleur rouge) pour la classe .prehistorique
  • Lier le fichier style.css dans la portion <head> de index.html
  • Vérifier dans le navigateur qu'Alien, Akira et Blade runner ont le style préhistorique
  • Hocher la tête en guise de satisfaction
  • Effectuer un commit avec le message « Identifier les films préhistoriques »

Étape 3

Dans le fichier script.js :

  • Créer une variable filmLePlusVieux qui contient le premier film de la liste
  • À l'aide d'une troisième boucle for, parcourir les films. Si l'année d'un film est plus petite que celle de filmLePlusVieux, remplacer filmLePlusVieux par ce film.
  • Après la boucle, supprimer filmLePlusVieux de la page
  • Vérifier dans le navigateur que le tout correspond au résultat attendu
  • Effectuer un commit avec le message « Supprimer le film le plus vieux »
  • Effectuer un push