Oui, ce que vous avez fait est juste, sauf que vous oubliez que JavaScript est synchronisé dans de nombreux cas, donc vous exécutez le code avant votre DOM soit chargé, il y a quelques façons de résoudre ce problème:
1) Vérifiez si DOM est complètement chargé, puis faites ce que vous voulez, vous pouvez écouter DOMContentLoaded par exemple:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
</script>
2) La manière la plus courante consiste à ajouter la balise de script au bas de votre document
(après la balise body):
<html>
<head>
</head>
<body>
</body>
<script src="/bundle.js"></script>
</html>
3) Utilisation de window.onload
, qui se déclenche lorsque la page entière est chargée (img, etc.)
window.addEventListener("load", function() {
console.log("Everything is loaded");
});
4) Utilisation de document.onload
, qui se déclenche lorsque le DOM est prêt:
document.addEventListener("load", function() {
console.log("DOM is ready");
});
Il y a encore plus d'options pour vérifier si DOM est prêt, mais la réponse courte est de NE PAS exécuter de script avant de vous assurer que votre DOM est prêt dans tous les cas ...
JavaScript fonctionne avec les éléments DOM et s'ils ne sont pas disponibles, retournera null , pourrait casser toute l'application ... alors assurez-vous toujours que vous êtes entièrement prêt à exécuter votre JavaScript avant de le faire ...