Javascript est exécuté dans un ordre descendant, sauf indication contraire de votre part, le code Javascript n'attendra pas que la page soit chargée avant de s'exécuter. Par exemple, une page Web contient le code HTML suivant :
Copiez le code comme suit :
<div id="ele">bienvenue sur www.VeVB.COm</div>
Si vous ajoutez le code Javascript suivant avant cette ligne de code HTML :
Copiez le code comme suit :
<script type="text/javascript">
document.getElementById('ele').innerHTML= 'bienvenue sur mon blog';
</script>
Lorsque vous exécutez la page, vous recevrez ce message d'erreur : "document.getElementById('ele') is null." La raison est que lorsque le javascript ci-dessus est exécuté, il n'y a aucun élément DOM avec l'ID 'ele' sur le page.
Il existe deux solutions :
1. Placez le code javascript après le code HTML :
Copiez le code comme suit :
<div id="ele">bienvenue sur www.VeVB.COm</div>
<script type="text/javascript">
document.getElementById('ele').innerHTML='bienvenue sur mon blog';
</script>
2. Attendez que la page Web soit chargée, puis exécutez le code javascript. Vous pouvez utiliser la solution traditionnelle (load) : ajoutez d'abord le corps HTML et ajoutez "<body load="load()">", puis appelez le code javascript ci-dessus dans la fonction load(). Ce sur quoi je veux me concentrer ici, c'est utiliser jQuery pour réaliser :
Copiez le code comme suit :
<script>
$(document).ready(function(){
document.getElementById('ele').innerHTML= 'bienvenue sur mon blog';
});
</script>
//Bien sûr, puisque jQuery est utilisé, la manière la plus simple de l'écrire est :
<script>
$(document).ready(function(){
$('#ele').html('welcome to my blog'); //La méthode .text() est également disponible ici
});
</script>
Vous pouvez placer le code jQuery ci-dessus n'importe où sur la page et il attendra toujours que la page soit chargée avant de s'exécuter.