Sucede que el código se ejecuta de manera descendente, desde el
<!DOCTYPE> hasta
</html>, entonces, si el código JavaScript es colocado en la cabecera, se ejecutará antes de que carguen los elementos del documento, por lo que no los afectará ya que aún no existen, en cambio, si lo colocas justo antes de la etiqueta
</body>, primero cargarán los elementos del documento y luego el código JavaScript, con lo cual los podrá afectar.
Como bien dices, hay casos en los que se suele colocar el código JavaScript en la cabecera, pero para que surta efecto, tienes que especificar una función que contendrá a dicho código y que se ejecutará una vez que haya cargado o el conjunto de elementos del documento (DOM) o toda la ventana (incluye imágenes y otros elementos que no sean HTML).
Código Javascript
:
Ver original//Ejecuta el código cuando la ventana terminó de cargar
window.addEventListener("load", function(){
//Instrucciones
}, false);
//Ejecuta el código cuando el DOM terminó de cargar
document.addEventListener("DOMContentLoaded", function(){
//Instrucciones
}, false);
Pero particularmente, lo coloco justo antes de la etiqueta
</body>, ahí nunca hay pierde.
Saludos