No entiendo bien el DOM

[Alexis88]

El evento DOMContentLoaded se dispara cuando ha terminado de cargar el modelo de objetos del documento, es decir, los elementos HTML que haya, mas no los subrecursos incluidos (fotos, vídeos, audio, frames). Cuando colocas el script al final de todo, este se ejecuta luego de que los elementos ubicados antes han cargado precisamente porque se encuentra después de ellos, lo cual no quiere decir que se hayan disparado los eventos DOMContentLoaded o load.

Para tener esto más claro, puedes utilizar el evento readystatechange, mismo que se dispara cada vez que cambia el estado de carga del documento:

Código Javascript:

document.addEventListener("readystatechange", function(){
    switch (this.readyState){
        case "loading":
            console.log("El documento está cargando");
            break;
        case "interactive":
            console.log("El DOM ha terminado de cargar, pero no los subrecursos");
            break;
        case "complete":
            console.log("El DOM y los subrecursos han terminado de cargar");
            break;
    }
}, false);
 

Como puedes apreciar, la propiedad readyState es la que contiene al estado de carga del documento, habiendo tres cuya descripción se encuentra en los mensajes que se muestran por cada caso. Cabe señalar que, el segundo estado, equivale al evento DOMContentLoaded; y el tercero, al evento load.

Y para utilizar la consola del navegador, tan solo necesitas ingresar al cuadro de herramientas para desarrolladores de tu navegador web, al cual puedes acceder a través del menú de opciones del mismo o, si usas Chrome, Firefox o IE/Edge, pulsando la tecla F12 y buscando la opción "Console" o "Consola" en el cuadro que se desplegará.