MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

O evento DOMContentLoaded é acionado quando o documento inicial HTML foi completamente carregado e analisado, sem aguardar por folhas de estilo, imagens, e subframes para encerrar o carregamento. Um evento muito diferente - load - deve ser usado apenas para detectar uma página completamente carregada. É um engano incrivelmente popular as pessoas utilizarem load quando DOMContentLoaded seria muito mais apropriado, então seja cauteloso.

Nota: Javascript Síncrono pausa a análise do DOM.

Acelerando

Se você quer que o DOM seja analisado o mais rápido possível após o usuário haver requisitado a página, você deve habilitar seu javascript assíncrono e otimizar o carregamento de folhas de estilo pois, caso não seja feito, farão a página ser carregada mais lentamente por serem carregados em paralelo, "roubando" tráfego do documento HTML principal.

Informações gerais

Especificação
HTML5
Interface
Event
Propaga
Sim
Cancelável
Sim (embora especificado como evento simples não-cancelável)
Alvo
Document
Ação Default
Nenhuma.

Propriedades

Property Type Description
target Somente leitura EventTarget The event target (the topmost target in the DOM tree).
type Somente leitura DOMString The type of event.
bubbles Somente leitura boolean Does the event normally bubble?
cancelable Somente leitura boolean Is it possible to cancel the event?

Exemplo

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM completamente carregado e analisado");
  });
</script>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM completamente carregado e analisado");
  });

for(var i=0; i<1000000000; i++)
{} // este script síncrono irá o atrasar carregamento do DOM. Então o evento DOMContentLoaded irá ser ativado mais tarde.
</script>

Compatibilidade entre Navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 0.2 1.0 (1.7 or earlier) 9.0 9.0 3.1
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico (Yes) 1.0 (1) ? (Yes) (Yes)

Propagação para este evento é suportada à partir do Gecko 1.9.2, Chrome 6, e Safari 4.

Cross-browser fallback

O Internet Explorer 8 suporta o evento readystatechange, que pode ser usado para detectar quando o DOM está pronto. Em versões anteriores do Internet Explorer, este estado pode ser detectado tentando executar document.documentElement.doScroll("left"); repetidas vezes; este comando dará erro repetidamente, até que o DOM esteja pronto.

Há também uma abundância de bibliotecas de propósito geral que oferecem métodos cross-browser para detectar se o DOM está pronto.

Eventos Relacionados

Etiquetas do documento e colaboradores

 Colaboradores desta página: greevin, macalha
 Última atualização por: greevin,