• Inicio
  • Blog
  • 🧠 ¿Qué es DOMContentLoaded en JavaScript y por qué deberías usarlo?

🧠 ¿Qué es DOMContentLoaded en JavaScript y por qué deberías usarlo?

Entender cuándo se ejecuta tu código es tan importante como saber escribirlo. En este artículo te explico qué es DOMContentLoaded, cómo funciona el flujo del navegador y cuándo deberías usarlo al trabajar con el DOM.

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:

  1. Se carga todo el HTML

  2. Se construye el DOM

  3. Se dispara el evento DOMContentLoaded

  4. Recié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:

  1. Lee el HTML

  2. Construye el DOM (Document Object Model)

  3. 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.

DOMContentLoadedwindow.onload
Se ejecuta cuando el HTML está listoEspera que TODO cargue
No espera imágenesEspera imágenes, CSS, iframes
Es más rápidoEs 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 defer en 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.


Comentarios
Unirse a la conversación
Escribe tu comentario…
Aún no hay comentarios en este artículo
Te puede interesar
Accede con tu cuenta de JePaFe Net
¿Ya tenes cuenta?
Iniciar sesión
Cerrar X