Desafio JavaScript de Manlikeakin, dia 93: DOM: DOMContentLoaded.

Uau.. terminamos este desafio a esta hora na próxima semana!

O  DOMContentLoaded é  acionado quando o conteúdo DOM é carregado, sem esperar que as imagens e folhas de estilo terminem de carregar.

Você precisa manipular o  evento DOMContentLoadedevent quando coloca o JavaScript no cabeçalho da página, mas faz referência a elementos no corpo, por exemplo:

Neste exemplo, referenciamos o botão no  corpo  do JavaScript na  cabeça .

Como o DOM não foi carregado quando o mecanismo JavaScript analisa o JavaScript no cabeçalho, o botão com o id btn não existe.

Para corrigir isso, você coloca o código dentro de um  manipulador de eventos DOMContentLoaded  , assim:

Quando você coloca JavaScript no cabeçalho, isso causa gargalos e atrasos na renderização, então é melhor mover o script antes da  tag </body> . Nesse caso, não é necessário colocar o código no  evento DOMContentLoaded  , assim:

Resumo

O  evento DOMContentLoaded é  acionado quando o conteúdo DOM é carregado, sem esperar que imagens e folhas de estilo terminem de carregar.

Manipule o evento DOMContentLoaded apenas   se você colocar o código JavaScript no cabeçalho, que faz referência a elementos na seção do corpo.

Obrigado por ler!