Court et simple : Parce que les éléments que vous recherchez n'existent pas (encore) dans le document.
Pour le reste de cette réponse, j'utiliserai les termes suivants getElementById à titre d'exemple, mais il en va de même pour getElementsByTagName , querySelector et toute autre méthode DOM qui sélectionne des éléments.
Raisons possibles
Il y a deux raisons pour lesquelles un élément peut ne pas exister :
-
Un élément avec l'ID passé n'existe pas vraiment dans le document. Vous devriez vérifier que l'ID que vous passez à getElementById correspond réellement à l'ID d'un élément existant dans le HTML (généré) et que vous n'avez pas mal orthographié l'ID (les ID sont sensible à la casse !).
D'ailleurs, dans le la majorité des navigateurs contemporains qui mettent en œuvre querySelector() et querySelectorAll() la notation de style CSS est utilisée pour retrouver 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 nom. id sous document.getElementById('elementID') ; dans la première, le # 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 présent vous appelez getElementById .
Ce dernier cas est assez fréquent. 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, échouera.
Prenons l'exemple suivant :
<script>
var element = document.getElementById('my_element');
</script>
<div id="my_element"></div>
Le site div apparaît après le site script . Au moment où le script est exécuté, l'élément n'existe pas. mais et getElementById retournera null .
jQuery
La même chose s'applique à tous les sélecteurs avec jQuery. jQuery ne trouvera pas les éléments si vous mal orthographié votre sélecteur ou vous essayez de les sélectionner avant qu'ils n'existent réellement .
Un autre cas de figure est celui où jQuery n'est pas trouvé parce que vous avez chargé le script sans protocole et que vous vous 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 l'effet secondaire malheureux d'essayer et d'échouer à charger file://somecdn.somewhere.com...
Solutions
Avant de passer un appel à getElementById (ou toute autre méthode DOM d'ailleurs), assurez-vous que les éléments auxquels vous voulez accéder existent, c'est-à-dire que le DOM est chargé.
Cela peut être assuré en mettant 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 placer le code juste avant la balise de fermeture du corps ( </body> ) (tous les éléments du DOM seront disponibles au moment de l'exécution du script).
D'autres solutions consistent à écouter le load [MDN] ou DOMContentLoaded [MDN] événements. Dans ces cas, l'endroit du document où vous placez le code JavaScript n'a pas d'importance, vous devez simplement vous rappeler de placer tout le code de traitement du 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 le articles à quirksmode.org pour plus d'informations sur le traitement des événements et les différences entre les navigateurs.
jQuery
Assurez-vous d'abord que jQuery est chargé correctement. Utilisez les outils de développement du navigateur pour savoir si le fichier jQuery a été trouvé et corriger l'URL si ce n'est pas le cas (par exemple, ajoutez l'élément http: ou https: schéma au début, ajuster le chemin, etc.)
À l'écoute de la load / DOMContentLoaded est 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énement.
En fait, le Tutoriel jQuery déclare explicitement :
Comme presque tout ce que nous faisons en utilisant jQuery lit ou manipule le modèle d'objet du 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 ready pour le document.
$(document).ready(function() {
// do stuff when DOM is ready
});
Vous pouvez également utiliser la syntaxe abrégée :
$(function() {
// do stuff when DOM is ready
});
Les deux sont équivalents.
39 votes
De nombreuses questions sont posées pour savoir pourquoi un certain élément du DOM n'est pas trouvé et la raison est souvent que le code JavaScript est placé avant l'élément du DOM. Ceci est destiné à être une réponse canonique pour ce type de questions. C'est un wiki communautaire, donc n'hésitez pas à l'améliorer .