DOM Esperando que el documento se cargue


Ejemplo

Uno de los eventos más utilizados es esperar a que el documento se haya cargado, incluidos los archivos de script y las imágenes. El evento de load en el document se utiliza para esto.

document.addEventListener('load', function() {
   console.log("Everything has now loaded!");
});

En ocasiones, intenta acceder a un objeto DOM antes de que se cargue, lo que genera punteros nulos. Estos son realmente difíciles de depurar. Para evitar esto, use el evento DOMContentLoaded document en su lugar. DOMContentLoaded garantiza que el contenido HTML se haya cargado e inicializado sin esperar otros recursos externos.

document.addEventListener('DOMContentLoaded', function() {
   console.log("The document contents are now available!");
});