Curto e simples: porque os elementos que você está procurando ainda não existem no documento.
Para o restante desta resposta, usarei getElementByIdcomo exemplo, mas o mesmo se aplica a getElementsByTagName, querySelectore a qualquer outro método DOM que selecione elementos.
Razões possíveis
Há duas razões pelas quais um elemento pode não existir:
Um elemento com o ID passado realmente não existe no documento. Você deve verificar se o ID para o qual você passa getElementByIdrealmente corresponde ao ID de um elemento existente no HTML (gerado) e se não digitou o ID incorretamente (os IDs diferenciam maiúsculas de minúsculas !).
Aliás, na maioria dos navegadores contemporâneos , que implementam querySelector()e querySelectorAll()métodos, a notação no estilo CSS é usada para recuperar um elemento por id, por exemplo document.querySelector('#elementID'):, em oposição ao método pelo qual um elemento é recuperado por seu idsub document.getElementById('elementID'); no primeiro, o #personagem é essencial; no segundo, levaria o elemento a não ser recuperado.
O elemento não existe no momento em que você chama getElementById.
O último caso é bastante comum. Os navegadores analisam e processam o HTML de cima para baixo. Isso significa que qualquer chamada para um elemento DOM que ocorra antes que o elemento DOM apareça no HTML falhará.
Considere o seguinte exemplo:
<script>
var element = document.getElementById('my_element');
</script>
<div id="my_element"></div>
A divaparece após o script. No momento em que o script é executado, o elemento não existe ainda e getElementByIdirá retornar null.
jQuery
O mesmo se aplica a todos os seletores com jQuery. O jQuery não encontrará elementos se você digitou incorretamente o seletor ou está tentando selecioná-los antes que eles realmente existam .
Um toque adicional é quando o jQuery não é encontrado porque você carregou o script sem protocolo e está sendo executado no sistema de arquivos:
<script src="//somecdn.somewhere.com/jquery.min.js"></script>
essa sintaxe é usada para permitir que o script seja carregado via HTTPS em uma página com protocolo https: // e para carregar a versão HTTP em uma página com protocolo http: //
Tem o efeito colateral lamentável de tentar e não carregar file://somecdn.somewhere.com...
Soluções
Antes de fazer uma chamada getElementById(ou qualquer método DOM), verifique se os elementos que você deseja acessar existem, ou seja, o DOM está carregado.
Isso pode ser garantido simplesmente colocando seu JavaScript após o elemento DOM correspondente
<div id="my_element"></div>
<script>
var element = document.getElementById('my_element');
</script>
nesse caso, você também pode colocar o código imediatamente antes da tag body de fechamento ( </body>) (todos os elementos DOM estarão disponíveis no momento em que o script for executado).
Outras soluções incluem ouvir os eventos load [MDN] ou DOMContentLoaded [MDN] . Nesses casos, não importa onde, no documento, você coloca o código JavaScript, basta lembrar de colocar todo o código de processamento DOM nos manipuladores de eventos.
Exemplo:
window.onload = function() {
// process DOM elements here
};
// or
// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
// process DOM elements here
});
Consulte os artigos em quirksmode.org para obter mais informações sobre manipulação de eventos e diferenças no navegador.
jQuery
Primeiro, verifique se o jQuery está carregado corretamente. Use as ferramentas de desenvolvedor do navegador para descobrir se o arquivo jQuery foi encontrado e corrija o URL se não estiver (por exemplo, adicione o esquema http:ou https:no início, ajuste o caminho etc.)
Ouvir os eventos load/ DOMContentLoadedé exatamente o que o jQuery está fazendo com .ready() [docs] . Todo o seu código jQuery que afeta o elemento DOM deve estar dentro desse manipulador de eventos.
De fato, o tutorial do jQuery afirma explicitamente:
Como quase tudo o que fazemos ao usar o jQuery lê ou manipula o modelo de objeto de documento (DOM), precisamos ter certeza de que começaremos a adicionar eventos etc. assim que o DOM estiver pronto.
Para isso, registramos um evento pronto para o documento.
$(document).ready(function() {
// do stuff when DOM is ready
});
Como alternativa, você também pode usar a sintaxe abreviada:
$(function() {
// do stuff when DOM is ready
});
Ambos são equivalentes.