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

Question

Je tente d'obtenir l'élément avec getElementById(), mais il retourne null même si l'élément existe. Qu'est-ce que je fais de mal?

    blah

        alert(document.getElementById("abc"));

Answer 1

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

Answer 2

Votre script s'exécute avant que le DOM ne soit chargé. 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 .

Answer 3

Si vous ne souhaitez pas vous attacher à l'événement de chargement, placez simplement votre script en bas du corps, il s'exécutera donc à la fin-

    blah    

        alert(document.getElementById("abc"));

Answer 4

Cela est dû au fait que le script s'exécute avant que la page ne soit rendue.

Pour le prouver, ajoutez cet attribut à la balise body :

Answer 5

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