📘 Chapitre 6 – Modifier texte, attributs et classes

1. 🎯 Objectif pédagogique

Apprendre à modifier dynamiquement le contenu, les attributs et les classes CSS d’un élément HTML grâce à JavaScript.

2. 📚 Concepts abordés

Modifier le texte d’un élément (innerText, innerHTML)
Changer les attributs (setAttribute, getAttribute)
Ajouter ou retirer une classe CSS (classList.add, classList.remove, classList.toggle)
Combiner sélection d’éléments et modification du DOM

3. 🧠 Explication théorique

Avec JavaScript, on peut mettre à jour le contenu d’une page sans recharger celle-ci.

Modifier le texte :

let titre = document.getElementById("titre");
titre.innerText = "Nouveau titre";

Modifier un attribut :

let image = document.querySelector("img");
image.setAttribute("alt", "Image de démonstration");
image.setAttribute("src", "photo.png");

Gérer les classes CSS :

let bouton = document.querySelector(".btn");
bouton.classList.add("active");    // Ajoute la classe
bouton.classList.remove("active"); // Retire la classe
bouton.classList.toggle("active"); // Alterne la classe

4. 🛠 Tutoriel pratique

Résumé

Nous allons modifier dynamiquement le texte d’un titre et l’image d’une page web en cliquant sur un bouton.

Arborescence du projet

mon_projet/
├── index.html
└── script.js

Étape 1 : Fichier HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Modifier le DOM</title>
  <style>
    .highlight {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1 id="titre">Titre original</h1>
  <img src="default.png" alt="Image par défaut" width="200">
  <button class="btn">Changer le contenu</button>

  <script src="script.js"></script>
</body>
</html>

Étape 2 : Code JavaScript

let titre = document.getElementById("titre");
let image = document.querySelector("img");
let bouton = document.querySelector(".btn");

bouton.addEventListener("click", function() {
  titre.innerText = "Titre modifié !";
  titre.classList.toggle("highlight");
  image.setAttribute("src", "photo.png");
  image.setAttribute("alt", "Nouvelle image");
});

Étape 3 : Test

Ouvre index.html, clique sur le bouton et observe les changements.

5. 🧾 Résumé et points-clés

innerText et innerHTML permettent de changer le contenu textuel ou HTML.
setAttribute modifie un attribut comme src ou alt.
classList permet de gérer les classes CSS pour dynamiser l’apparence.