Breve y simple: porque los elementos que está buscando no existen en el documento (todavía).
Para el resto de esta respuesta voy a utilizar getElementByIdcomo ejemplo, pero lo mismo se aplica a getElementsByTagName, querySelectory cualquier otro método DOM que los elementos seleccione.
Posibles razones
Hay dos razones por las cuales un elemento podría no existir:
Un elemento con la ID pasada realmente no existe en el documento. Debe verificar que la ID que pasa getElementByIdrealmente coincida con la ID de un elemento existente en el HTML (generado) y que no haya escrito mal la ID (¡las ID distinguen entre mayúsculas y minúsculas !).
Por cierto, en la mayoría de los navegadores contemporáneos , que implementan querySelector()y querySelectorAll()métodos, la notación de estilo CSS se utiliza para recuperar un elemento por su id, por ejemplo:, a document.querySelector('#elementID')diferencia del método por el cual un elemento se recupera por iddebajo document.getElementById('elementID'); en el primero el #personaje es esencial, en el segundo llevaría a que el elemento no se recupere.
El elemento no existe en el momento que llamas getElementById.
El último caso es bastante común. Los navegadores analizan y procesan el HTML de arriba a abajo. Eso significa que cualquier llamada a un elemento DOM que ocurra antes de que ese elemento DOM aparezca en el HTML, fallará.
Considere el siguiente ejemplo:
<script>
var element = document.getElementById('my_element');
</script>
<div id="my_element"></div>
El divaparece después de la script. En el momento en que se ejecuta la secuencia de comandos, el elemento no existe todavía y getElementByIdvolverá null.
jQuery
Lo mismo se aplica a todos los selectores con jQuery. jQuery no encontrará elementos si ha escrito mal su selector o está intentando seleccionarlos antes de que realmente existan .
Un giro adicional es cuando no se encuentra jQuery porque ha cargado el script sin protocolo y se está ejecutando desde el sistema de archivos:
<script src="//somecdn.somewhere.com/jquery.min.js"></script>
Esta sintaxis se utiliza para permitir que el script se cargue a través de HTTPS en una página con el protocolo https: // y para cargar la versión HTTP en una página con el protocolo http: //
Tiene el desafortunado efecto secundario de intentar y no cargar file://somecdn.somewhere.com...
Soluciones
Antes de hacer una llamada a getElementById(o cualquier método DOM para el caso), asegúrese de que los elementos a los que desea acceder existan, es decir, que el DOM esté cargado.
Esto se puede garantizar simplemente colocando su JavaScript después del elemento DOM correspondiente
<div id="my_element"></div>
<script>
var element = document.getElementById('my_element');
</script>
en cuyo caso también puede poner el código justo antes de la etiqueta del cuerpo de cierre ( </body>) (todos los elementos DOM estarán disponibles en el momento en que se ejecute el script).
Otras soluciones incluyen escuchar los eventos load [MDN] o DOMContentLoaded [MDN] . En estos casos, no importa en qué parte del documento coloque el código JavaScript, solo debe recordar colocar todo el código de procesamiento DOM en los controladores de eventos.
Ejemplo:
window.onload = function() {
// process DOM elements here
};
// or
// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
// process DOM elements here
});
Consulte los artículos en quirksmode.org para obtener más información sobre el manejo de eventos y las diferencias del navegador.
jQuery
Primero asegúrese de que jQuery esté cargado correctamente. Utilice las herramientas de desarrollo del navegador para averiguar si se encontró el archivo jQuery y corrija la URL si no fue así (por ejemplo, agregue el esquema http:o https:al principio, ajuste la ruta, etc.)
Escuchar los eventos load/ DOMContentLoadedes exactamente lo que está haciendo jQuery con .ready() [docs] . Todo el código jQuery que afecta al elemento DOM debe estar dentro de ese controlador de eventos.
De hecho, el tutorial jQuery declara explícitamente:
Como casi todo lo que hacemos cuando usamos jQuery lee o manipula el modelo de objetos del documento (DOM), debemos asegurarnos de comenzar a agregar eventos, etc., tan pronto como el DOM esté listo.
Para hacer esto, registramos un evento listo para el documento.
$(document).ready(function() {
// do stuff when DOM is ready
});
Alternativamente, también puede usar la sintaxis abreviada:
$(function() {
// do stuff when DOM is ready
});
Ambos son equivalentes.