Javascript getElementById（）返回null，即使元素存在_Javascript_Html_Null_Getelementbyid

Javascript getElementById（）返回null，即使元素存在

javascript html

Javascript getElementById（）返回null，即使元素存在,javascript,html,null,getelementbyid,Javascript,Html,Null,Getelementbyid,我试图用getElementById（）获取元素，但即使元素存在，它也返回null。我做错了什么 <html> <head> <title>blah</title> <script type="text/javascript"> alert(document.getElementById("abc")); </script> </head> <body>

我试图用getElementById（）获取元素，但即使元素存在，它也返回null。我做错了什么

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

    </div>
</body>


废话
警报（document.getElementById（“abc”）；

您必须将其放入

文档

加载

事件中。在执行脚本时，DOM还没有到达

abc

。

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

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

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

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

您的脚本在加载DOM之前运行。要解决此问题，您可以将代码放在

窗口中。onload

函数如下：

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

另一种方法是将

脚本

放在关闭

标记的正前方。

如果不想附加到加载事件，只需将脚本放在正文的底部，这样它就会在结尾执行-

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


废话
警报（document.getElementById（“abc”）；

对于初学者来说，将脚本放在底部可能更容易。啊，谢谢！我一直认为脚本是在加载html后运行的。请注意，您需要等待大约10分钟才能接受javascript中的.im starter，我认为这个答案需要一个文档加载的示例heheAlso，另外一个原因是验证组件id的路径是否正确，不仅是表单id，还有表单的父级（如果有）（例如accordeon），然后是组件，请始终验证这一点。“Right before/BODY”可能会让初学者感到困惑。要求是将脚本放在脚本需要引用的HTML元素之后。与身体的距离不相关。另一件需要注意的事情。如果在文档上有一个window.onload，它紧跟着从上到下的另一个window-onload，则第二个window-onload将覆盖第一个window.onload的内容。例如，如果您尝试在第一个window.onload中使用JS句柄设置s背景色，如：

document.getElementById（'div01'）。style.background='blue'

和在第二个窗口中具有相同的句柄。onload但设置为“黑色”，则div的背景色将是黑色而不是蓝色。DOM中的秩序很重要。回答得很好！简单且包含工作示例！