即使元素存在,getElementById()也返回null

Question

即使元素存在,getElementById()也返回null

Sof*_*nux 55 html javascript null getelementbyid

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

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

    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Dan*_*ite 72

你必须把它放在一个document load事件中.abc在脚本执行时,DOM还没有达到目的.

对于初学者来说,将脚本置于底部可能更容易. (23认同)

Answer 2

mVC*_*Chr 37

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

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

Run Code Online (Sandbox Code Playgroud)

另一种方法是将您的script权利放在结束</body>标记之前.

"就在/ BODY之前"可能会让初学者感到困惑.要求是将SCRIPT放在脚本需要引用的HTML元素之后.到/ BODY的距离无关紧要. (3认同)
另一件需要注意的事情。如果您的 window.onload 跟随另一个窗口 onload **在文档上从上到下**，则第二个窗口 onload 将覆盖第一个 window.onload 的内容。例如，如果您尝试使用 JS 句柄在第一个 window.onload 内设置 **<div>s** 背景颜色，如下所示：`document.getElementById('div01').style.background = 'blue';`并且在第二个 window.onload 中具有相同的句柄，但设置为“黑色”，您的 div 的背景颜色将是黑色而不是蓝色。DOM 中的顺序很重要。 (2认同)

Answer 3

Pre*_*raj 8

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，5 月前
查看次数：	83586 次
最近记录：	10 年，7 月前