为什么 document.GetElementById 返回 null [重复]答案

【问题标题】：Why is document.GetElementById returning null [duplicate]为什么 document.GetElementById 返回 null [重复]
【发布时间】：2011-02-07 14:18:27
【问题描述】：

我一直在成功使用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，我找不到可能有什么问题。

【问题讨论】：

标签： javascript getelementbyid

【解决方案1】：

时机。

当您获取元素时，文档还没有准备好。

在检索元素之前，您必须wait until the document is ready。

【讨论】：

【解决方案2】：

你可以像这样使用脚本标签：

<script defer>
    // your JavaScript code goes here
</script>

加载完所有内容后，JavaScript 将应用于所有元素。

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案4】：

浏览器将在找到该脚本后立即执行该脚本。此时，文档的其余部分尚未加载——还没有任何具有该 id 的元素。如果您在该部分文档加载后运行该代码，它将正常工作。

【讨论】：

【解决方案5】：

没有 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

【讨论】：

"without an explicit event [...] the scripts are not run" 我不同意。如果脚本确实没有运行，那么 (1) 为什么 OP 会收到警告 ... is null？ (2) 您必须以<script event="...">...</script> 之类的方式指定事件，因为window.onload = ... 也是脚本的一部分，因此不会运行。 ¶ 我认为answer 更好地阐述了这个问题。

【解决方案6】：

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

使用+= 分配更多eventHandlers 给文档的onload 事件。

【讨论】：

这对我没有任何作用。