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.