Le DOM - Cours JavaScript

Le DOM (Document Object Model)

Ce qui te permet de modifier une page HTML avec JavaScript.

Imagine : tu es le maître du jeu, capable de modifier en direct le décor, les dialogues ou les interfaces. En JavaScript, cette magie s’appelle le DOM. Il te donne accès à la structure HTML de ta page pour lire ou changer ce qui s’y passe.

5.1Accéder à un élément

Utilise querySelector ou getElementById pour sélectionner un élément HTML :

let bouton = document.querySelector("button");
let titre = document.getElementById("titre-principal");

5.2Modifier du contenu

Tu peux changer le texte ou le HTML d’un élément :

titre.textContent = "Bienvenue, aventurier.";
titre.innerHTML = "<span>Prépare-toi à ta quête.</span>";

5.3Modifier un style

Tu peux changer l’apparence en modifiant le style directement :

titre.style.color = "darkred";
titre.style.fontSize = "2rem";

5.4Ajouter ou retirer une classe

Pour déclencher un effet CSS, tu peux utiliser les classes :

titre.classList.add("sombre");
titre.classList.remove("sombre");
titre.classList.toggle("sombre");

5.5Créer un nouvel élément

Pour faire apparaître un nouvel élément :

let message = document.createElement("p");
message.textContent = "Un coffre ancien apparaît.";
document.body.appendChild(message);

5.6Supprimer un élément

Et pour faire disparaître un élément :

message.remove();

5.7Naviguer dans le DOM

Tu peux aussi parcourir les relations entre les éléments :

let section = document.querySelector("section");

console.log(section.parentElement); // l’élément parent
console.log(section.children);      // les enfants
console.log(section.nextElementSibling); // l’élément suivant