Le DOM (Document Object Model) est la représentation de votre page HTML sous forme d’objets que JavaScript peut lire et modifier. C’est ainsi qu’on change une page en direct.

Sélectionner un élément

  • document.querySelector("h1") — le premier élément correspondant.
  • document.getElementById("titre") — un élément par son identifiant.

Modifier un élément

const titre = document.querySelector("h1");
titre.textContent = "Nouveau titre !";
titre.style.color = "blue";

On peut ainsi :

  • Changer le texte avec textContent.
  • Modifier le style avec style.
  • Ajouter ou retirer des classes avec classList.

En combinant sélection, événements et modification du DOM, vous rendez une page réellement dynamique : un clic peut afficher un message, changer une couleur ou révéler un contenu caché.

À retenir : sélectionnez un élément, puis modifiez son texte ou son style. Le DOM est le pont entre votre code et la page affichée.

PrécédentSuivant