Cuando empezamos a trabajar con JavaScript y el DOM, aparece un problema muy común:
❌ “No funciona mi código”
❌ “Me dice que no puede leer null”
❌ “El botón no existe”
Y muchas veces el problema no es el código…
Es cuándo se ejecuta.
Ahí entra en juego DOMContentLoaded.
📌 ¿Qué es DOMContentLoaded?
DOMContentLoaded es un evento del navegador que se dispara cuando:
✅ El HTML ya fue completamente cargado
✅ El DOM ya fue construido
❌ Pero las imágenes u otros recursos pueden no haber terminado de cargar
En otras palabras:
El documento ya está listo para que JavaScript lo manipule.
🧱 Primero entendamos el problema
Mirá este ejemplo:
<script>
const boton = document.getElementById("miBoton");
boton.textContent = "Hola";
</script>
<button id="miBoton">Click</button>
¿Qué pasa?
El navegador lee el HTML de arriba hacia abajo.
Cuando ejecuta el <script>, el botón todavía no fue leído.
Entonces:
document.getElementById("miBoton")
devuelve null.
Y al intentar cambiar el texto… error.
✅ La solución: esperar a que el DOM esté listo
<script>
document.addEventListener("DOMContentLoaded", function () {
const boton = document.getElementById("miBoton");
boton.textContent = "Hola";
});
</script>
<button id="miBoton">Click</button>
Ahora el flujo es:
Se carga todo el HTML
Se construye el DOM
Se dispara el evento
DOMContentLoadedRecién ahí se ejecuta el código
✔️ Ya no hay error
✔️ El botón existe
✔️ El texto se modifica correctamente
🧠 ¿Qué está pasando realmente?
El navegador:
Lee el HTML
Construye el DOM (Document Object Model)
Cuando termina, dispara el evento
DOMContentLoaded
Ese evento es como decir:
“Listo, ya podés trabajar con los elementos”.
🆚 Diferencia entre DOMContentLoaded y window.onload
Muchos estudiantes los confunden.
| DOMContentLoaded | window.onload |
|---|---|
| Se ejecuta cuando el HTML está listo | Espera que TODO cargue |
| No espera imágenes | Espera imágenes, CSS, iframes |
| Es más rápido | Es más lento |
| Ideal para manipular el DOM | Útil si necesitás trabajar con imágenes cargadas |
Ejemplo de window.onload:
window.onload = function () {
console.log("Todo el contenido fue cargado");
};
En la mayoría de los casos, para trabajar con el DOM, conviene usar DOMContentLoaded.
🎯 ¿Cuándo deberías usarlo?
Usalo cuando:
Tu
<script>está en el<head>Querés asegurarte de que los elementos existen
Estás empezando a trabajar con el DOM
No estás usando
deferen el script
🚀 Alternativa moderna: usar defer
Hoy en día también podés escribir:
<script src="script.js" defer></script>
El atributo defer hace que el script:
Se descargue en paralelo
Se ejecute cuando el DOM ya está listo
En muchos proyectos modernos, esto reemplaza la necesidad de usar DOMContentLoaded.
🧩 Conclusión
DOMContentLoaded no es magia.
Es simplemente una forma de decir:
“Esperá a que el documento esté listo antes de ejecutar tu código”.
Entender esto evita errores muy comunes y te ayuda a comprender mejor cómo el navegador procesa una página.
Y cuando entendés el flujo…
JavaScript deja de parecer impredecible.