¿Qué es el evento DOMContentLoaded?

Este evento ocurre cuando el documento HTML inicial se ha cargado y analizado completamente, sin esperar a que se carguen las hojas de estilo, imágenes y submarcos.

La principal diferencia con el evento load:

• DOMContentLoaded: Se activará cuando la estructura del DOM esté lista.
• load: Se activará solo después de que se hayan cargado completamente todos los recursos de la página (imágenes, CSS, scripts, si no son async/defer).

Uso:

// Añadimos un listener para el evento DOMContentLoaded
document.addEventListener('DOMContentLoaded', () => {
  // Código que debe ejecutarse después de que el DOM esté completamente cargado y analizado
  console.log('DOM completamente cargado y analizado.');
});

Este evento se usa a menudo para ejecutar código JavaScript que manipula el DOM, ya que no es necesario esperar a que se carguen todos los recursos externos.