Equivalente a $(document).ready em JavaScript puro

Neste artigo você vai aprender uma função equivalente a $(document).ready em JavaScript puro, ou seja, sem depender de bibliotecas como jQuery

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e também carregamento de págia e DOM!

Para simular o efeito de $(document).ready com JS Vanilla podemos adicionar um evento ao DOM

Utilizaremos então document, e o método addEventListener

O evento será DOMContentLoaded, que ativa apenas quando o DOM é carregado

Ou seja, tem a mesma função da inicialização do jQuery, legal né?

Veja um exemplo prático de aplicação da solução:

document.addEventListener("DOMContentLoaded", function(e) {
    // Aqui vai o seu código
});

Veja que dentro do evento é incluida uma função anônima

Dentro desta função colocaremos todo o código que precisa ser executado após o carregamento de DOM

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Ou seja, após disparar o evento DOMContentLoaded!

E apenas com esta linha de código atingimos o efeito da função ready

Desta maneira você não precisa se incomodar mais com desencontro de JavaScript sendo executado, mediante a necessidade de algum elemento de HTML em particular

Evitando erros que podem acontecer na execução da sua aplicação, caso os elementos não estivessem presentes, o que é um problema bem comum

Ainda mais com o desuso de jQuery, programadores apelam as vezes para o setTimeout, o que é uma má prática

Pois não sabemos as condições adversas que podem acontecer devido a internet ou processamento do computador do usuário

Conclusão

Neste artigo você aprendeu a como criar uma função equivalente a $(document).ready em JavaScript vanilla

Utilizamos um evento de DOM por meio de document e addEventListener, o evento é chamado de DOMContentLoaded

E o mesmo é disparado após o completo carregamento do DOM da página, evitando assim erros de execução de script

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

$(document).ready e $(function(){}) são a mesma coisa?

Se você veio do jQuery, provavelmente escrevia de uma dessas duas formas

$(document).ready(function() {
// seu código
});

$(function() {
// seu código
});

As duas fazem a mesma coisa, a segunda é só um atalho da primeira

E as duas viram a MESMA linha em JavaScript puro:

document.addEventListener("DOMContentLoaded", function() {
// seu código
});

Tome cuidado com a escrita: $document.ready, sem os parênteses, não existe

O certo é $(document).ready, com o document dentro dos parênteses do $

Então se você copiou de algum lugar e nada acontece, olha os parênteses primeiro 🙂

DOMContentLoaded ou window.onload? Qual usar:

Os dois esperam a página, só que não esperam a mesma coisa

O DOMContentLoaded dispara assim que o HTML termina de ser lido e o DOM está montado

Já o evento load do window espera TUDO: imagens, iframes, folhas de estilo e por aí vai

// dispara antes: DOM montado
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM pronto");
});

// dispara depois: página inteira carregada
window.addEventListener("load", function() {
console.log("tudo carregado, imagens inclusive");
});

Na prática: se seu código só precisa pegar elemento, mexer em classe, colocar listener em botão, o DOMContentLoaded é o que você quer

Se você precisa da altura ou da largura real de uma imagem, aí sim vale esperar o load

É a diferença entre "a estrutura existe" e "tudo terminou de baixar", beleza?

E se o script rodar depois do DOM já estar pronto?

Aqui mora um erro clássico, e já me ferrei com ele

Se o seu script é carregado tarde (com async, injetado por outro script, colado lá no fim da página), o DOMContentLoaded pode já ter disparado

E evento que já passou não volta: seu callback simplesmente não roda, sem nenhum erro no console 😬

A saída é olhar o estado do documento ANTES de assinar o evento:

function aoCarregar(callback) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", callback);
} else {
callback();
}
}

aoCarregar(function() {
// seu código aqui, rodando em qualquer cenário
});

Traduzindo: se o documento ainda está sendo lido (loading), a gente espera o evento

Se já passou disso, chama a função na hora

Essa versão é a mais segura pra reaproveitar em projeto, porque não depende de onde a tag script foi parar

Perguntas frequentes:

Preciso do jQuery só pra usar o ready?

Não, o document.addEventListener("DOMContentLoaded", ...) resolve esse caso sem nenhuma biblioteca instalada

Posso ter mais de um DOMContentLoaded na mesma página?

Pode, e é bem comum: o addEventListener acumula, então cada arquivo ou trecho pode registrar o seu, e todos são executados na ordem em que foram registrados

O atributo defer substitui o DOMContentLoaded?

Colocar defer na tag do script faz o navegador executar o arquivo só depois de ler o HTML, o que já resolve boa parte dos casos

<script src="app.js" defer></script>

O DOMContentLoaded continua útil quando o código é inline ou quando você não controla como o script entra na página

Por que meu getElementById volta null?

Na maioria das vezes é script rodando antes do elemento existir

Joga esse trecho pra dentro do DOMContentLoaded e o problema some