关于javascript：getElementById()返回null，即使该元素存在


getElementById() returns null even though the element exists

本问题已经有最佳答案，请猛点这里访问。

我正在尝试使用getElementById()获取元素，但即使元素存在，它也会返回null。 我究竟做错了什么？

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
    blah
    <script type="text/javascript">
        alert(document.getElementById("abc"));
   
</head>
<body>
   

   
</body>

你必须将它放在document load事件中。 在脚本执行时，DOM还没有达到abc。

相关讨论

您的脚本在加载DOM之前运行。 要解决此问题，您可以将代码放在window.onload函数中，如下所示：

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

另一种方法是将script放在结束标记之前。

相关讨论

如果你不想附加到load事件，那么只需将你的脚本放在body的底部，这样它就会在最后执行 -

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
    blah    
</head>
<body>
   
   
    <script type="text/javascript">
        alert(document.getElementById("abc"));
   
</body>
</html>

这是因为脚本在页面呈现之前运行。

为了证明，将此属性添加到body标记：

1
<body onloadx="alert(document.getElementById('abc'));">

但它不存在，而不是HTML中的那一点。 HTML文档从上到下进行解析，就像程序运行一样。 最好的解决方案是将脚本标记放在页面底部。 您还可以将JavaScript附加到onload事件。