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.