Breve e semplice: perché gli elementi che stai cercando non esistono (ancora) nel documento.
Per il resto di questa risposta userò getElementByIdcome esempio, ma lo stesso vale per getElementsByTagName, querySelectore qualsiasi altro metodo DOM che gli elementi Seleziona.
Possibili ragioni
Esistono due motivi per cui un elemento potrebbe non esistere:
Un elemento con l'ID passato in realtà non esiste nel documento. Dovresti ricontrollare che l'ID che passi per getElementByIdcorrispondere realmente a un ID di un elemento esistente nell'HTML (generato) e che non hai sbagliato a scrivere l'ID (gli ID fanno distinzione tra maiuscole e minuscole !).
Per inciso, nella maggior parte dei browser contemporanei , che implementano querySelector()e querySelectorAll()metodi, la notazione in stile CSS viene utilizzata per recuperare un elemento dal suo id, ad esempio: document.querySelector('#elementID')al contrario del metodo con cui un elemento viene recuperato dal suo idsotto document.getElementById('elementID'); nel primo il #personaggio è essenziale, nel secondo porterebbe a non recuperare l'elemento.
L'elemento non esiste al momento della chiamata getElementById.
Quest'ultimo caso è abbastanza comune. I browser analizzano ed elaborano l'HTML dall'alto verso il basso. Ciò significa che qualsiasi chiamata a un elemento DOM che si verifica prima che l'elemento DOM venga visualizzato nell'HTML avrà esito negativo.
Considera il seguente esempio:
<script>
var element = document.getElementById('my_element');
</script>
<div id="my_element"></div>
Il divcompare dopo il script. Nel momento in cui lo script viene eseguito, l'elemento non esiste ancora e getElementByIdtornerà null.
jQuery
Lo stesso vale per tutti i selettori con jQuery. jQuery non troverà elementi se hai sbagliato l' ortografia del selettore o stai provando a selezionarli prima che esistano effettivamente .
Un'ulteriore svolta è quando jQuery non viene trovato perché hai caricato lo script senza protocollo e sei in esecuzione dal file system:
<script src="//somecdn.somewhere.com/jquery.min.js"></script>
questa sintassi viene utilizzata per consentire allo script di caricare tramite HTTPS su una pagina con protocollo https: // e di caricare la versione HTTP su una pagina con protocollo http: //
Ha lo sfortunato effetto collaterale di tentare e non riuscire a caricare file://somecdn.somewhere.com...
soluzioni
Prima di effettuare una chiamata a getElementById (o qualsiasi metodo DOM per quella materia), assicurarsi che gli elementi a cui si desidera accedere esistano, ovvero che il DOM sia caricato.
Questo può essere garantito semplicemente inserendo il tuo JavaScript dopo l'elemento DOM corrispondente
<div id="my_element"></div>
<script>
var element = document.getElementById('my_element');
</script>
nel qual caso puoi anche inserire il codice appena prima del tag body di chiusura ( </body>) (tutti gli elementi DOM saranno disponibili al momento dell'esecuzione dello script).
Altre soluzioni includono l'ascolto degli eventi load [MDN] o DOMContentLoaded [MDN] . In questi casi, non importa dove nel documento inserisci il codice JavaScript, devi solo ricordare di inserire tutto il codice di elaborazione DOM nei gestori di eventi.
Esempio:
window.onload = function() {
// process DOM elements here
};
// or
// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
// process DOM elements here
});
Per ulteriori informazioni sulla gestione degli eventi e sulle differenze del browser, consultare gli articoli su quirksmode.org .
jQuery
Assicurati innanzitutto che jQuery sia caricato correttamente. Utilizza gli strumenti di sviluppo del browser per scoprire se il file jQuery è stato trovato e correggi l'URL se non lo è (ad esempio aggiungi lo schema http:o https:all'inizio, regola il percorso, ecc.)
L'ascolto di load/ DOMContentLoaded events è esattamente quello che jQuery sta facendo con .ready() [docs] . Tutto il codice jQuery che influisce sull'elemento DOM dovrebbe essere all'interno del gestore eventi.
In effetti, il tutorial di jQuery afferma esplicitamente:
Poiché quasi tutto ciò che facciamo quando si utilizza jQuery legge o manipola il modello a oggetti del documento (DOM), dobbiamo assicurarci di iniziare ad aggiungere eventi ecc. Non appena il DOM è pronto.
Per fare ciò, registriamo un evento pronto per il documento.
$(document).ready(function() {
// do stuff when DOM is ready
});
In alternativa puoi anche usare la sintassi abbreviata:
$(function() {
// do stuff when DOM is ready
});
Entrambi sono equivalenti.