8. El DOM: El Cerebro de la Web 🧠
¿Qué es el DOM?
Es el Document Object Model. Es una representación que hace el navegador de tu archivo HTML para que JavaScript pueda entrar, leerlo y cambiarlo en tiempo real.
dom-basico.js
JAVASCRIPT
1 // Seleccionar un título
2 const titulo = document.getElementById("titulo-principal");
3
4 // Cambiar su texto
5 titulo.textContent = "¡He sido hackeado con JS!";
Los Selectores maestros
La forma más moderna de seleccionar cualquier cosa en tu página es usar selectores tipo CSS.
- querySelector(): Devuelve el primero que encuentre.
- querySelectorAll(): Devuelve todos los que coincidan (un arreglo).
selectores.js
JAVASCRIPT
1 // Seleccionar el primer botón que sea de clase .btn-enviar
2 const boton = document.querySelector(".btn-enviar");
3
4 // Seleccionar todos los párrafos <p>
5 const parrafos = document.querySelectorAll("p");
💻 Misión: Cambia el estilo con JS
¿Cómo cambiarías el color de fondo de un elemento seleccionado a azul usando JavaScript?
👁️ Ver solución sugerida
JS
JAVASCRIPT
1 const elemento = document.querySelector("#mi-div");
2 elemento.style.backgroundColor = "blue";
