Le DOM (Document Object Model)
Ce qui te permet de modifier une page HTML avec JavaScript.
5.1Accéder à un élément
Utilise querySelector ou getElementById pour sélectionner un élément HTML :
JavaScriptjavascript
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 :
JavaScriptjavascript
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 :
JavaScriptjavascript
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 :
JavaScriptjavascript
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 :
JavaScriptjavascript
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 :
JavaScriptjavascript
message.remove();5.7Naviguer dans le DOM
Tu peux aussi parcourir les relations entre les éléments :
JavaScriptjavascript
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