El DOM (Modelo de Objetos del Documento) es cómo JS habla con HTML. Pero manipular el DOM es lento. Saber hacerlo eficientemente es una habilidad senior.
Patio de Juegos Interactivo
<div id="padre" style="padding: 20px; background: #eee;">
Div Padre
<button id="hijo">Haz Clic (Hijo)</button>
</div>
<p id="log">Registros:</p>Event Bubbling (Torre de Champán)
Cuando haces clic en un botón dentro de un div, en realidad estás haciendo clic en ambos.
El evento "Burbujea" hacia arriba como una burbuja en el agua: Botón → Div → Body → HTML.
Patrón Pro (Delegación de Eventos): En lugar de agregar 100 listeners a 100 elementos de lista, agrega 1 listener a la lista padre (UL). Captura todos los clics de sus hijos.
Seleccionando Elementos
javascript
// Moderno y Flexible
const btn = document.querySelector(".btn-enviar");
const todosItems = document.querySelectorAll("li");
// Vieja Escuela (Más rápido, pero específico)
const header = document.getElementById("header");Modificando el DOM
javascript
const caja = document.createElement("div");
caja.classList.add("caja-alerta");
caja.textContent = "¡Error Guardado!";
document.body.appendChild(caja);