O que é o evento DOMContentLoaded?

Este evento ocorre quando o documento HTML inicial foi totalmente carregado e analisado, sem esperar pelo carregamento de folhas de estilo, imagens e subquadros.

A principal diferença em relação ao evento load:

• DOMContentLoaded: Disparará quando a estrutura do DOM estiver pronta.
• load: Disparará apenas após o carregamento completo de todos os recursos da página (imagens, CSS, scripts, se não forem async/defer).

Uso:

// Adicionamos um ouvinte para o evento DOMContentLoaded
document.addEventListener('DOMContentLoaded', () => {
  // Código que deve ser executado após o DOM estar completamente carregado e analisado
  console.log('DOM totalmente carregado e analisado.');
});

Este evento é frequentemente usado para executar código JavaScript que manipula o DOM, pois não é necessário esperar pelo carregamento de todos os recursos externos.