web-dev-qa-db-ja.com

document.GetElementByIdがnullを返すのはなぜですか

Document.GetElementByIdを正常に使用していますが、しばらくしてから再び機能させることはできません。私がそれを使用した古いページはまだ動作しますが、これはとても簡単です：

<html>
<head>
 <title>no title</title> 
 <script type="text/javascript">
 document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
 </script>
</head>
<body>
 <div id="ThisWillBeNull"></div>
</body>
</html>

「document.getElementById（ "parsedOutput"）is null」と常に言っています。 Firefoxを使用するか、Chromeを使用するか、どの拡張機能を有効にするか、HTMLにどのヘッダーを使用するかは関係ありません。常にnullであり、何が間違っているのかわかりません。

ご意見ありがとうございます=）

javascriptgetelementbyid
21
BadDayComing

ページは上から下にレンダリングされます。コードは解析された直後に実行されます。実行時には、divはまだ存在していません。 window.onload関数でラップする必要があります。

45
steve_c

これを試して：

 <script type="text/javascript">
  window.onload = function() {
   document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
  }
 </script>
28
Sarfraz

window.onloadがなければ、スクリプトは呼び出されません。 Javascriptはイベントベースの言語であるため、onload、onclick、onmouseoverなどの明示的なイベントがないと、スクリプトは実行されません。

<script type="text/javascript">  
  window.onload = function(){  
   document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";  
  }
</script>

オンロードイベント：

読み込みイベントは、ドキュメントの読み込みプロセスの最後に発生します。この時点で、ドキュメント内のすべてのオブジェクトがDOMにあり、すべての画像とサブフレームの読み込みが完了しています。

https://developer.mozilla.org/en/DOM/window.onload

8
Christopher Altman

タイミング。

要素を取得するとき、ドキュメントの準備ができていません。

要素を取得する前に、 ドキュメントの準備ができるまで待つ にする必要があります。

4
Cheeso

ブラウザは、スクリプトを見つけるとすぐに実行します。その時点では、ドキュメントの残りの部分はまだ読み込まれていません。そのIDを持つ要素はまだありません。そのコードを実行するとafter文書の一部がロードされ、正常に動作します。

2
Syntactic
<script type="text/javascript">
  window.onload += function() {
   document.getElementById("ThisWillBeNull").innerHTML = "Why is this null?";
  }
 </script>

使用する +=は、ドキュメントのonloadイベントにさらにeventHandlersを割り当てます。

0
Tarik