The DOM (Document Object Model) is your HTML page represented as objects that JavaScript can read and modify. That is how you change a page on the fly.

Selecting an element

  • document.querySelector("h1") — the first matching element.
  • document.getElementById("titre") — an element by its id.

Modifying an element

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

This lets you:

  • Change the text with textContent.
  • Change the styling with style.
  • Add or remove classes with classList.

By combining selection, events and DOM changes, you make a page genuinely dynamic: a click can display a message, change a colour or reveal hidden content.

Key takeaway: select an element, then change its text or its style. The DOM is the bridge between your code and the page on screen.

PreviousNext