web-dev-qa-db-ja.com

getElementById（）は、要素が存在する場合でもnullを返します

GetElementById（）で要素を取得しようとしていますが、要素が存在してもnullを返します。私は何を間違えていますか？

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

    </div>
</body>
javascripthtmlnullgetelementbyid
52
Softnux

これをdocumentloadイベントに配置する必要があります。 DOMは、スクリプトが実行されるまでにabcに到達していません。

71
Daniel A. White

DOMがロードされる前にスクリプトが実行されます。これを修正するには、コードをwindow.onload次のような関数：

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

別の方法として、scriptを閉じる</body>タグ。

36
mVChr

ロードイベントにアタッチしない場合は、スクリプトを本文の下部に配置するだけで、スクリプトは最後に実行されます。

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

これは、ページがレンダリングされる前にスクリプトが実行されるためです。

証拠として、この属性をbodyタグに追加します。

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

しかし、それは存在せず、HTMLのその時点ではありません。 HTMLドキュメントは、プログラムが実行されるように、上から下に解析されます。最善の解決策は、スクリプトタグをページの下部に配置することです。 JavaScriptをonloadイベントに添付することもできます。

0
jpsimons