El DOM (Document Object Model) es la representación de tu página HTML en forma de objetos que JavaScript puede leer y modificar. Así es como se cambia una página en directo.

Seleccionar un elemento

  • document.querySelector("h1") — el primer elemento que coincide.
  • document.getElementById("titre") — un elemento por su identificador.

Modificar un elemento

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

De este modo puedes:

  • Cambiar el texto con textContent.
  • Modificar el estilo con style.
  • Añadir o quitar clases con classList.

Combinando selección, eventos y modificación del DOM haces que una página sea realmente dinámica: un clic puede mostrar un mensaje, cambiar un color o revelar un contenido oculto.

Recuerda: selecciona un elemento y después modifica su texto o su estilo. El DOM es el puente entre tu código y la página que se ve.

AnteriorSiguiente