O DOMContentLoaded é um tipo de evento da API do DOM, ou seja, quando agente executa JavaScript no navegador, o navegador disponibiliza a API do DOM para agente usar no nosso código JavaScript, e nessa API existe esse evento do document que é o DOMContentLoaded.
Para entender melhor vamos ver um exemplo, ou seja, vamos supor que dentro de um arquivo html temos a seguinte estrutura:
const paragraph = document.document('p');
console.log(paragraph);
//então, ao carregar a página no navegador, no console poderemos ver o seguinte:
<p>Hola mundo</p>
//mas por que? Porque primeiro o elemento p foi criado no DOM, e só depois o script (app.js) que exibe o elemento no console foi carregado e executado
Agora, vamos ver o que acontece quando dentro do arquivo html colocamos o script antes do parágrafo:
Usando o mesmo arquivo app.js teremos a seguinte resposta:
const paragraph = document.document('p');
console.log(paragraph);
//então, ao carregar a página no navegador, no console veremos o seguinte:
null
//como podemos ver, o querySelector não encontrou o elemento que foi especificado como argumento dele, ou seja, não encontrou o parágrafo. Mas por que aconteceu isso? Isso aconteceu porque no momento que o script foi executado o DOM ainda não tinha sido carregado completamente, portanto, o paragrafo ainda não tinha sido carregado.
//Como funciona o carregamento do DOM? Esse carregamento é executado de acima para baixo. Ou seja, primeiro todo o que está dentro da tag head é carregado e depois o que está na tag body é carregado, mas acontece que quando o navegador encontra uma tag script, ele para o carregamento da tela, então, ele baixa o script, parsea o script, e executa o que tiver que ser executado. Então, no nosso exemplo, o script que estava na tag head foi executado quando o conteudo do body nem tinha sido carregado
Uma possível solução para resolver o problema anterior é usar o evento DOMContentLoaded, já que o callback do DOMContentLoaded é executado depois que o DOM é carregado. Neste ponto temos que ter cuidado para não confundir carregamento do DOM com carregamento de recurso, já que o DOMContentLoaded vai ser disparado independentemente se algum recurso mais pesado (uma imagem pesada por exemplo) ainda estiver carregando, ou seja, o DOMContentLoaded vai ser disparado quando o HTML inicial do documento foi completamente carregado e parseado, e o DOMContentLoaded não vai esperar por estilos, imagens ou subframes terminarem de carregar para ser ele ser disparado, ou seja, ele vai ser disparado sem esperar que os recursos terminem de ser carregados.
Então, podemos usar o DOMContentLoaded quando no nosso script agente precisa manipular um elemento HTML e agente não espera que esse elemento esteja carregado.
A seguir, veremos um exemplo usando o mesmo código html do exemplo anterior:
Mas agora implementaremos a solução usando o evento "DOMContentLoaded" encadeado no elemento "document" como se mostra a continução, ou seja, a seguir se mostra o código do arquivo app.js:
const logElement = () => {
const paragraph = document.querySelector('p');
console.log(paragraph);
}
document.addEventListener('DOMContentLoaded', logElement);
//então, agora quando o arquivo script seja carregado, por consola se mostrará a seguinte resposta:
<p>Hola mundo</p>
//porque o "DOMContentLoaded" esperou que todos os elementos do DOM foram carregados para depois executar o callback dele
Em resumo, temos que saber que se colocamos a tag script antes da tag de fechamento do body, o uso do "DOMContentLoaded" não é necessário, já que se colocamos a tag script antes da tag de fechamento do body conseguiremos o mesmo efeito sem usar o "DOMContentLoaded".
O evento DOMContentLoaded
O DOMContentLoaded é um tipo de evento da API do DOM, ou seja, quando agente executa JavaScript no navegador, o navegador disponibiliza a API do DOM para agente usar no nosso código JavaScript, e nessa API existe esse evento do document que é o DOMContentLoaded.
Para entender melhor vamos ver um exemplo, ou seja, vamos supor que dentro de um arquivo html temos a seguinte estrutura:
E que no arquivo app.js temos o seguinte código:
Agora, vamos ver o que acontece quando dentro do arquivo html colocamos o script antes do parágrafo:
Usando o mesmo arquivo app.js teremos a seguinte resposta:
Uma possível solução para resolver o problema anterior é usar o evento DOMContentLoaded, já que o callback do DOMContentLoaded é executado depois que o DOM é carregado. Neste ponto temos que ter cuidado para não confundir carregamento do DOM com carregamento de recurso, já que o DOMContentLoaded vai ser disparado independentemente se algum recurso mais pesado (uma imagem pesada por exemplo) ainda estiver carregando, ou seja, o DOMContentLoaded vai ser disparado quando o HTML inicial do documento foi completamente carregado e parseado, e o DOMContentLoaded não vai esperar por estilos, imagens ou subframes terminarem de carregar para ser ele ser disparado, ou seja, ele vai ser disparado sem esperar que os recursos terminem de ser carregados.
Então, podemos usar o DOMContentLoaded quando no nosso script agente precisa manipular um elemento HTML e agente não espera que esse elemento esteja carregado.
A seguir, veremos um exemplo usando o mesmo código html do exemplo anterior:
Mas agora implementaremos a solução usando o evento "DOMContentLoaded" encadeado no elemento "document" como se mostra a continução, ou seja, a seguir se mostra o código do arquivo app.js:
Em resumo, temos que saber que se colocamos a tag script antes da tag de fechamento do body, o uso do "DOMContentLoaded" não é necessário, já que se colocamos a tag script antes da tag de fechamento do body conseguiremos o mesmo efeito sem usar o "DOMContentLoaded".