Aula 55 — DOMContentLoaded vs load

Na aula anterior, entendemos como funcionam os eventos, os event handlers e o objeto event.

Agora vamos responder uma dúvida muito comum:

Quando exatamente o JavaScript pode começar a manipular o DOM?

Para isso, precisamos entender dois eventos importantes:

• DOMContentLoaded
• load

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o processo de carregamento da página
• Saber a diferença entre DOMContentLoaded e load
• Escolher o evento certo para cada situação
• Evitar erros de DOM não carregado

O que acontece quando a página carrega?

Quando o navegador abre uma página, ele segue alguns passos:

1. Carrega o HTML
2. Constrói o DOM
3. Carrega arquivos externos (imagens, CSS, fontes)
4. Finaliza o carregamento

Os eventos DOMContentLoaded e load acontecem em momentos diferentes desse processo.

O evento DOMContentLoaded

O DOMContentLoaded é disparado quando:

• Todo o HTML foi carregado
• O DOM foi construído

Ele não espera:

• Imagens
• CSS
• Fontes

Exemplo com DOMContentLoaded

 
  document.addEventListener("DOMContentLoaded", function () 
  { 
    const titulo = document.getElementById("titulo"); 
    titulo.textContent = "DOM pronto!"; 
  }); 

Aqui garantimos que o elemento já existe no DOM.

O evento load

O evento load é disparado quando:

• HTML foi carregado
• DOM foi construído
• Imagens foram carregadas
• CSS foi carregado
• Fontes foram carregadas

Ou seja: quando tudo está completamente pronto.

Exemplo com load

 window.addEventListener("load", function () { console.log("Página totalmente carregada"); }); 

 console.log("Página totalmente carregada"); // Saída será exibida após todos os recursos carregarem 

Qual devo usar?

Na maioria dos casos:

Ele é mais rápido e suficiente para:

• Manipular DOM
• Adicionar eventos
• Criar elementos dinamicamente

Quando usar load?

Use load quando você precisa:

• Saber o tamanho real de imagens
• Trabalhar com canvas
• Depender de fontes carregadas

E se o script estiver no final do HTML?

Se o script estiver antes de </body>, o DOM já estará carregado.

Nesse caso, muitas vezes nem é necessário usar eventos de carregamento.

Resumo comparativo

• DOMContentLoaded → DOM pronto
• load → tudo pronto
• DOMContentLoaded é mais rápido
• load é mais completo

Na próxima aula, vamos estudar os eventos de mouse em detalhes.