Compreendendo a preparação do DOM sem estruturas

Ao desenvolver aplicativos da web, é crucial determinar quando o Document Object Model (DOM) está pronto para manipulação. Embora estruturas como jQuery ofereçam ouvintes readyState, este artigo explora abordagens alternativas para detectar a prontidão do DOM.

Acesso direto ao estado do DOM

Em vez de depender de estruturas, você pode diretamente verifique a propriedade readyState do documento:

if (document.readyState === 'complete') {
  // DOM is ready
}

No entanto, essa abordagem não é confiável em vários navegadores, pois alguns podem não fornecer um valor readyState preciso.

Verificação pronta do DOM baseada em eventos

Uma abordagem mais entre navegadores é escutar o evento DOMContentLoaded, que é acionado quando o DOM está pronto para manipulação:

function fireOnReady() {
  // ...
}
if (document.readyState === 'complete') {
  fireOnReady();
} else {
  document.addEventListener("DOMContentLoaded", fireOnReady);
}

Aproveitando a propriedade isReady não documentada do jQuery

Embora não documentado, o jQuery expõe uma propriedade isReady que indica internamente o estado pronto do DOM:

if ($.isReady) {
  // DOM is ready
} else {
  // DOM is not yet ready
}

Lightweight DOM Ready Snippet

Inspirado no snippet de Dustin Diaz, você pode criar um mini listener pronto para DOM da seguinte maneira:

if (!/in/.test(document.readyState)) {
  // Document is ready
} else {
  // Document is not ready
}

Essa verificação aproveita o fato de que o valor readyState contém "in" em estados de carregamento anteriores, tornando-o um indicador confiável da prontidão do DOM.