2011-03-20 5 views
38

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?getElementById() renvoie null même si l'élément existe

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

    </div> 
</body> 

Répondre

56

Vous devez mettre cela dans un document événement load. Le DOM n'a pas atteint abc au moment où le script est exécuté.

+14

Mettre le script en bas est probablement plus facile pour les débutants. –

+0

Ah, merci! Toujours pensé que le script a été exécuté après le chargement du code HTML. – Softnux

+0

S'il vous plaît noter que vous devez attendre comme 10 minutes avant de pouvoir accepter. – pimvdb

4

Cela est dû au fait que le script s'exécute avant le rendu de la page.

Pour preuve ajouter cet attribut à la balise body:

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

Mais il n'existe pas, pas à ce moment dans le code HTML. Les documents HTML sont analysés de haut en bas, tout comme les programmes s'exécutent. La meilleure solution consiste simplement à placer votre balise de script en bas de la page. Vous pouvez également joindre votre JavaScript à l'événement onload.

28

Votre script s'exécute avant le chargement du DOM. Pour corriger cela, vous pouvez placer votre code dans la fonction window.onload comme ceci:

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

Une alternative est de placer votre script juste avant la balise de fermeture </body>.

+3

"Juste avant/BODY" peut confondre les débutants. L'exigence est de placer le SCRIPT après l'élément HTML que le script doit référencer. La distance à/BODY n'est pas pertinente. –

+1

Merci monsieur. Vous m'avez dit à partir de 24 heures de stress. – Edwinfad

6

Si vous ne voulez pas joindre à l'événement de chargement, puis il suffit de mettre votre script au bas du corps, de sorte qu'il exécute au

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