¿Cómo determinar si el DOM está cargado?

Utilizar el evento DOMContentLoaded.

document.addEventListener('DOMContentLoaded', () => {
  // Código que se ejecutará después de cargar el DOM
});

Alternativamente, se puede verificar la propiedad document.readyState:

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    // Código
  });
} else {
  // El DOM ya está cargado
}

El evento DOMContentLoaded se dispara después de que se ha cargado y analizado completamente el documento HTML, pero antes de la carga de recursos externos como estilos e imágenes.

Para determinar la carga completa de la página, incluyendo todos los recursos, se usa el evento load:

window.addEventListener('load', () => {
  // Código que se ejecutará después de la carga completa de la página
});