JavaScript · Leçon 5

Manipuler le DOM

Le DOM (Document Object Model), c'est la page HTML vue par JavaScript : un arbre d'objets qu'on peut lire et modifier. C'est là que HTML, CSS et JS se rejoignent.

La page est un arbre

document
└── html
    ├── head
    └── body
        ├── h1          "Mon titre"
        └── ul
            ├── li      "Un"
            └── li      "Deux"

Chaque balise devient un élément que JS peut attraper, puis modifier.

Sélectionner des éléments

querySelector utilise les mêmes sélecteurs qu'en CSS !

Modifier des éléments

Bonne pratique Plutôt que element.style, prépare une classe en CSS et ajoute-la avec classList. Le style reste dans le CSS, le comportement dans le JS.

Un utilisateur tape <b>Salut</b> dans un champ. Pour l'afficher tel quel, sans risque, on utilise…

  1. innerHTML
  2. textContent

textContent affiche le texte brut. innerHTML interpréterait les balises — dangereux avec du texte venant d'un utilisateur (faille XSS).

Créer et supprimer des éléments

À toi de jouer

Le relooking

Ne modifie pas le HTML ! En JavaScript uniquement :

  • Change le texte du h1 en Bienvenue !
  • Ajoute la classe promo au paragraphe #offre.
  • Change l'image : src = ../assets/img/chat.svg.
IndiceCommence toujours par attraper l’élément : document.querySelector("h1").
IndiceTexte → .textContent = … ; classe → .classList.add("promo") ; image → .src = ….
IndiceLes trois lignes commencent ainsi :
document.querySelector("h1").textContent = ...;
document.querySelector("#offre").classList.add(...);
document.querySelector("img").src = ...;

Le menu généré

Pour chaque plat du tableau, crée un li dans #menu.

IndiceRécupère d’abord la liste : const menu = document.querySelector("#menu");
IndiceParcours le tableau avec for (const plat of plats) { … } : un tour de boucle par plat.
IndiceDans la boucle :
const li = document.createElement("li");
li.textContent = plat;
menu.append(li);

Le catalogue

Pour chaque produit, crée dans #catalogue une div de classe carte qui contient un h3 (le nom) et un p (le prix, ex. 49 €).

IndiceMême principe que l’exercice précédent, sauf que chaque carte contient elle-même deux éléments.
IndicePour chaque produit, crée 3 éléments : la div (avec classList.add("carte")), le h3 et le p.
IndiceAssemble de l’intérieur vers l’extérieur : carte.append(titre, prix); puis catalogue.append(carte);. Le prix : `${produit.prix} €`.

À retenir