为什么 DOM 元素为空？ [复制]答案

【问题标题】：Why is a DOM element null? [duplicate]为什么 DOM 元素为空？ [复制]
【发布时间】：2016-10-17 05:45:03
【问题描述】：

我有这个简单的 HTML 文件：

<!DOCTYPE html>
<html>
<head>
    <script src='test.js'></script>
</head>

<body>
    <p>I am a paragraph tag</p>
    <h1 >I am an h1 tag</h1>
    <div id="id"> I am a div tag</div>
</body>

还有这个简单的脚本（test.js）：

y=document.getElementById("id");
y.style.color="green";

为什么“y”是空的？我得到的错误是

TypeError: y is null

我确定这是我缺少的一个简单的语法，但我终其一生都无法弄清楚！救命！

Post Script：html 文件和 test.js 文件都在同一个文件夹中。

【问题讨论】：

这个问题一天会被问好几次。将来，请尝试在提问之前研究问题:)
你应该使用 var 语法声明你的变量，例如var y = document ..." 最后，您的 javascript 在元素加载到 dom 之前运行。您可以通过将 javascript 包装在 (function() { }); 中来修复它
@zeros-and-ones 使其成为局部变量
啊，是的，本地与全球。这是对 JS 变量范围的简短参考：stackoverflow.com/questions/19721313/…

标签： javascript styles runtime-error

【解决方案1】：

创建所有元素后，您必须将脚本放在文档的末尾：

<!DOCTYPE html>
<html>
<head>

</head>

<body>
    <p>I am a paragraph tag</p>
    <h1 >I am an h1 tag</h1>
    <div id="id"> I am a div tag</div>
</body>
<script src='test.js'></script>

【讨论】：

嗯...这很奇怪。它有效，但我以前从未这样做过。我想这就是我在事件处理程序中使用的所有其他内容的原因，因此它不会在文档加载后立即运行。
正确，如果你想放在最上面你可以使用window.onload

【解决方案2】：

如果您使用的是 jQuery，则可以使用 $(document).ready 将内容包装在脚本上，如果使用纯 JavaScript，则可以使用 window.onload。

【讨论】：

我不认为 OP 正在使用jquery
@Hector Barbossa 这是 Stackoverflow 的最大+最大问题，像你这样的人会决定“放弃它并尝试 jQuery！”如果问题是not tagged jQuery，那么don't answer with jQuery.
对不起，我的错......我之前没有检查标签，但我也给出了一个简单的javascript解决方案