Chargement de la page
En règle générale on peut agir sur un élément que s'il existe.
En JavaScript c'est la même chose, on ne peut pas modifier par programmation un élément qui n'existerait pas encore.
Le code ne peut donc pas se trouver avant la création du HTML.
Ce qui suit est correct :
<html>
<head>
</head>
<body>
<div>
<img id='image' alt='image' src='images/image1.gif' />
</div>
<script>
document.querySelector('#image').src = "images/image2.gif";
</script>
</body>
</html>
Ce qui suit est incorrect :
<html>
<head>
<script>
document.querySelector('#image').src = "images/image2.gif";
</script>
</head>
<body>
<div>
<img id='image' alt='image' src='images/image1.gif' />
</div>
</body>
</html>
Dans la console il serait affiché : document.querySelector('#image') is null
En effet, l'image n'existe pas encore et on tente de la modifier.
Méthode : window.addEventListener("load", fonction, false)
Pour écrire le JavaScript avant la création du HTML, il faut créer des fonctions qu'on appellera une fois la page chargée.
L'événement qui définit qu'une page est chargée est load.
Le principe est de lui associer une fonction qui sera réalisée à chaque fois que l'événement se produit.
window.addEventListener("load", fonction, false)
La fonction sera lancée après le chargement de la page.
Ce qui nous donne au final :
HTML
<html>
<head>
<script src="js/exemple.js"></script>
</head>
<body>
<div>
<img id='image' alt='image' src='images/image1.gif' />
</div>
</body>
</html>
JavaScript
window.addEventListener("load", function(){
document.querySelector('#image').src = "images/image2.gif";
});
Remarque : Autre solution
Vous pouvez contourner le problème de chargement de page en positionnant vos scripts juste avant la fin de body dans votre page HTML.