Manipuler le DOM
14 min · Intermédiaire · 7 août 2026
Sélectionner un élément
javascript
const titre = document.querySelector("h1");
console.log(titre.textContent); // le texte actuel du <h1>
const items = document.querySelectorAll("li");
console.log(items.length); // le nombre de <li> dans la pagequerySelector renvoie le premier élément correspondant au sélecteur CSS, ou null si aucun n’existe. querySelectorAll renvoie tous les éléments correspondants.
Modifier le texte et les classes
javascript
const titre = document.querySelector("h1");
titre.textContent = "Nouveau titre";
titre.classList.add("actif");
titre.classList.remove("inactif");
titre.classList.toggle("surligne");Attention
Vérifie toujours qu’un élément a bien été trouvé avant de le manipuler : appeler une méthode sur null (élément absent) provoque une erreur qui arrête le script.
Créer un nouvel élément
javascript
const nouvelleLi = document.createElement("li");
nouvelleLi.textContent = "Nouvel élément";
document.querySelector("ul").appendChild(nouvelleLi);À toi de jouer
La page contient un élément <p id="message">En attente</p>. Écris une fonction mettreAJourMessage(texte) qui remplace le texte de cet élément par texte et lui ajoute la classe "actif".
html
<!-- HTML -->
<p id="message">En attente</p>
// JS
function mettreAJourMessage(texte) {
// Change le texte de #message et ajoute la classe "actif"
}