为啥 DOM 元素为空？ [复制]
Posted
技术标签:
【中文标题】为啥 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 变量范围的简短参考：***.com/questions/19721313/… 【参考方案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 这是 *** 的最大+最大问题，像你这样的人会决定“放弃它并尝试 jQuery！”如果问题是not tagged jQuery，那么don't answer with jQuery. 对不起，我的错......我之前没有检查标签，但我也给出了一个简单的javascript解决方案以上是关于为啥 DOM 元素为空？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章