getElementById () renvoie null même si l'élément existe [dupliquer]
cette question a déjà une réponse ici:
- pourquoi jQuery ou une méthode DOM telle que getElementById ne trouve-t-elle pas l'élément? 6 réponses
j'essaie d'obtenir l'élément avec getElementById(), mais il renvoie null même si l'élément existe. Ce que je fais mal?
<html>
<head>
<title>blah</title>
<script type="text/javascript">
alert(document.getElementById("abc"));
</script>
</head>
<body>
<div id="abc">
</div>
</body>
5 réponses
vous devez mettre cela dans un document load événement. Le DOM n'a pas atteint abc au moment où le script est exécuté.
votre script s'exécute avant que le DOM ait été chargé. Pour corriger cela, vous pouvez placer votre code dans la fonction window.onload comme suit:
window.onload = function() {
alert(document.getElementById("abc"));
};
une alternative est de placer votre script juste avant la fermeture </body> étiquette.
si vous ne voulez pas vous attacher à l'événement load alors mettez simplement votre script au fond du corps, donc il s'exécutera à la fin-
<html>
<head>
<title>blah</title>
</head>
<body>
<div id="abc">
</div>
<script type="text/javascript">
alert(document.getElementById("abc"));
</script>
</body>
</html>
c'est parce que le script court avant que la page ait rendu.
pour preuve, ajouter cet attribut à la balise:
<body onload="alert(document.getElementById('abc'));" >
mais il n'existe pas, pas à ce point dans le HTML. Les documents HTML sont analysés de haut en bas, tout comme les programmes. La meilleure solution est juste de mettre votre étiquette de script au bas de la page. Vous pouvez aussi joindre votre JavaScript à l'événement onload.