web-dev-qa-db-fra.com

getElementById () renvoie null même si l'élément existe

J'essaie d'obtenir l'élément avec getElementById (), mais il renvoie null même si l'élément existe. Qu'est-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>
javascripthtmlnullgetelementbyid
52
Softnux

Vous devez mettre cela dans un événement documentload. Le DOM n'est pas arrivé à abc au moment où le script est exécuté.

71
Daniel A. White

Votre script s'exécute avant le chargement du DOM. Pour résoudre ce problème, vous pouvez placer votre code dans le window.onload fonctionne comme ceci:

window.onload = function() {
    alert(document.getElementById("abc"));
};

Une alternative consiste à placer votre script juste avant la fermeture </body> tag.

36
mVChr

Si vous ne voulez pas vous attacher à l'événement de chargement, placez simplement votre script au bas du corps, afin qu'il s'exécute à la fin.

<html>
<head> 
    <title>blah</title>    
</head> 
<body>
    <div id="abc">
    </div>
    <script type="text/javascript">
        alert(document.getElementById("abc"));
    </script>
</body>
</html>
7
Premraj

En effet, le script s'exécute avant le rendu de la page.

Pour preuve, ajoutez cet attribut à la balise body:

<body onload="alert(document.getElementById('abc'));" >
4
Hogan

Mais cela n'existe pas, pas à ce stade du HTML. Les documents HTML sont analysés de haut en bas, tout comme les programmes s'exécutent. La meilleure solution consiste simplement à mettre votre balise de script en bas de la page. Vous pouvez également attacher votre JavaScript à l'événement onload.

0
jpsimons