Como determinar se o DOM está carregado?

Utilizar o evento DOMContentLoaded.

document.addEventListener('DOMContentLoaded', () => {
  // Código que será executado após o carregamento do DOM
});

Alternativamente, pode verificar a propriedade document.readyState:

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    // Código
  });
} else {
  // DOM já carregado
}

O evento DOMContentLoaded dispara após o carregamento e análise completos do documento HTML, mas antes do carregamento de recursos externos, como estilos e imagens.

Para determinar o carregamento completo da página, incluindo todos os recursos, usa-se o evento load:

window.addEventListener('load', () => {
  // Código que será executado após o carregamento completo da página
});