Manipuler le DOM & réagir aux clics

1. Le DOM, c’est quoi ?

Le DOM (Document Object Model) est la “représentation” du HTML en mémoire. JavaScript peut lire / modifier ce DOM → donc changer la page en direct.

<h1 id="titre">Titre original</h1>

const titre = document.getElementById("titre");
titre.innerText = "Nouveau titre depuis JS";

2. Sélectionner un élément (querySelector)

Pour récupérer un élément, tu peux utiliser :

• document.getElementById("mon-id")
• document.querySelector(".ma-classe")
• document.querySelector("h1")

// HTML
// <p id="message">Texte de base</p>

// JS
const message = document.querySelector("#message");
message.innerText = "Texte modifié !";

3. Modifier le contenu et le style

const titre = document.querySelector("h1");

titre.innerText = "Titre simple";   // texte brut
titre.innerHTML = "Titre <em>stylé</em>";

const box = document.querySelector(".box");

box.style.backgroundColor = "#4f8bff";
box.style.color = "white";
box.style.borderRadius = "12px";

4. Réagir à un clic (addEventListener)

Tu peux dire à un élément : “Quand on clique sur toi, exécute cette fonction”.

// HTML
// <button id="btn">Clique-moi</button>

// JS
const btn = document.querySelector("#btn");

btn.addEventListener("click", function () {
  console.log("Bouton cliqué !");
});

Quand l’utilisateur clique, la fonction anonyme est exécutée. Tu peux aussi définir une fonction à part :

function direBonjour() {
  console.log("Bonjour !");
}

btn.addEventListener("click", direBonjour);

5. Mini labo : compteur de clics

Exemple typique : un compteur qui augmente quand on clique, avec un bouton pour remettre à zéro.

<div class="counter-box">
  <button id="moins" class="counter-btn secondary">-</button>
  <span id="valeur" class="counter-value">0</span>
  <button id="plus" class="counter-btn">+</button>
  <button id="reset" class="counter-btn secondary">Reset</button>
</div>

let compteur = 0;

const span = document.querySelector("#valeur");
const btnPlus = document.querySelector("#plus");
const btnMoins = document.querySelector("#moins");
const btnReset = document.querySelector("#reset");

function majAffichage() {
  span.innerText = compteur;
}

btnPlus.addEventListener("click", () => {
  compteur++;
  majAffichage();
});

btnMoins.addEventListener("click", () => {
  compteur--;
  majAffichage();
});

btnReset.addEventListener("click", () => {
  compteur = 0;
  majAffichage();
});

Tu as une version simplifiée ci-dessous directement dans la page :

6. Mini-projet : bouton qui change le texte & la couleur

Crée une page interaction.html + un fichier interaction.js avec :

• Un titre <h1 id="titre-js">Titre de base</h1>
• Un paragraphe <p id="texte-js">Texte de base...</p>
• Un bouton <button id="btn-change">Changer le texte</button>

Dans ton JS, fais en sorte que :

• au clic sur le bouton, le texte du titre et du paragraphe change,
• la couleur du paragraphe devienne différente (ex : vert),
• optionnel : que le bouton change lui aussi de texte (“Revenir à l’état normal”).

// Piste JS
const titre = document.querySelector("#titre-js");
const texte = document.querySelector("#texte-js");
const btn = document.querySelector("#btn-change");

// TODO : ajouter un addEventListener("click", ...) ici