Bref et simple: car les éléments que vous recherchez n'existent pas (encore) dans le document.
Pour le reste de cette réponse, je vais utiliser getElementByIdcomme exemple, mais la même chose s'applique à getElementsByTagName, querySelectoret à toute autre méthode DOM qui sélectionne des éléments.
Raisons possibles
Il existe deux raisons pour lesquelles un élément peut ne pas exister:
Un élément avec l'ID transmis n'existe vraiment pas dans le document. Vous devez vérifier que l'ID que vous transmettez getElementByIdcorrespond vraiment à l'ID d'un élément existant dans le code HTML (généré) et que vous n'avez pas mal orthographié l'ID (les ID sont sensibles à la casse !).
Par ailleurs, dans la majorité des navigateurs contemporains , qui implémentent querySelector()et querySelectorAll()méthodes, la notation de style CSS est utilisée pour récupérer un élément par son id, par exemple:, document.querySelector('#elementID')par opposition à la méthode par laquelle un élément est récupéré par son idsous document.getElementById('elementID'); dans le premier le #caractère est essentiel, dans le second il conduirait à ce que l'élément ne soit pas récupéré.
L'élément n'existe pas au moment où vous appelez getElementById.
Ce dernier cas est assez courant. Les navigateurs analysent et traitent le HTML de haut en bas. Cela signifie que tout appel à un élément DOM qui se produit avant que cet élément DOM n'apparaisse dans le HTML, échoue.
Prenons l'exemple suivant:
<script>
var element = document.getElementById('my_element');
</script>
<div id="my_element"></div>
Le divapparaît après le script. Au moment où le script est exécuté, l'élément n'existe pas encore et getElementByIdreviendra null.
jQuery
La même chose s'applique à tous les sélecteurs avec jQuery. jQuery ne trouvera pas d'éléments si vous avez mal orthographié votre sélecteur ou si vous essayez de les sélectionner avant qu'ils n'existent réellement .
Une torsion supplémentaire se produit lorsque jQuery est introuvable car vous avez chargé le script sans protocole et exécutez à partir du système de fichiers:
<script src="//somecdn.somewhere.com/jquery.min.js"></script>
cette syntaxe est utilisée pour permettre au script de se charger via HTTPS sur une page avec le protocole https: // et de charger la version HTTP sur une page avec le protocole http: //
Il a le malheureux effet secondaire de tenter et de ne pas charger file://somecdn.somewhere.com...
Solutions
Avant d'appeler getElementById(ou toute méthode DOM d'ailleurs), assurez-vous que les éléments auxquels vous souhaitez accéder existent, c'est-à-dire que le DOM est chargé.
Cela peut être assuré en plaçant simplement votre JavaScript après l'élément DOM correspondant
<div id="my_element"></div>
<script>
var element = document.getElementById('my_element');
</script>
dans ce cas, vous pouvez également mettre le code juste avant la balise de fermeture du corps ( </body>) (tous les éléments DOM seront disponibles au moment de l'exécution du script).
D'autres solutions incluent l'écoute des événements load [MDN] ou DOMContentLoaded [MDN] . Dans ces cas, peu importe où dans le document vous placez le code JavaScript, il vous suffit de vous rappeler de mettre tout le code de traitement DOM dans les gestionnaires d'événements.
Exemple:
window.onload = function() {
// process DOM elements here
};
// or
// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
// process DOM elements here
});
Veuillez consulter les articles sur quirksmode.org pour plus d'informations sur la gestion des événements et les différences de navigateur.
jQuery
Assurez-vous d'abord que jQuery est correctement chargé. Utilisez les outils de développement du navigateur pour savoir si le fichier jQuery a été trouvé et corrigez l'URL dans le cas contraire (par exemple, ajoutez le schéma http:ou https:au début, ajustez le chemin, etc.)
L'écoute des événements load/ DOMContentLoadedest exactement ce que jQuery fait avec .ready() [docs] . Tout votre code jQuery qui affecte l'élément DOM doit se trouver dans ce gestionnaire d'événements.
En fait, le didacticiel jQuery indique explicitement:
Comme presque tout ce que nous faisons lors de l'utilisation de jQuery lit ou manipule le modèle d'objet de document (DOM), nous devons nous assurer que nous commençons à ajouter des événements, etc. dès que le DOM est prêt.
Pour ce faire, nous enregistrons un événement prêt pour le document.
$(document).ready(function() {
// do stuff when DOM is ready
});
Alternativement, vous pouvez également utiliser la syntaxe abrégée:
$(function() {
// do stuff when DOM is ready
});
Les deux sont équivalents.