未定义从 document.getElementById 获取文档
JDe*_*Dev 1 html javascript atom-editor
我正在学习 JavaScript，我正在使用 Atom（文本编辑器）。在我的 HTML 文件中，我只得到了这个：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<button id="displayTodosButton">Display Todos</button>
<button>Toggle Todos</button>
</body>
</html>
在我的 javascript 文件中，我只是尝试使用以下方法访问“显示待办事项”按钮：
var displayTodosButton = document.getElementById('displayTodosButton')
我正在观看视频，讲师正在使用plnkr.co，他可以很好地访问按钮，但在 Atom 上我收到“参考错误：文档未定义”
我怎样才能解决这个问题？
但在 Atom 上我得到
如果您的意思是您的文本编辑器 Atom 突出显示它并向您显示document未定义的警告，那只是 Atom 没有意识到您正在浏览器上下文中运行该代码，document将在其中定义。
它可能有一个环境，让你可以告诉它，你会在浏览器中运行的代码，因此它可以承担全局的默认设置（window，document，等）。
如果代码中的代码script.js正是您所显示的，尽管 Atom 显示的错误不会成为问题（因为在浏览器中，document不会是undefined），您将null返回，getElementById因为您的代码在元素存在之前运行. 同样，这是假设代码是独立的，而不是（比如）在DOMContentLoaded处理程序或类似的内部。
除非您有充分的理由这样做（而且数量不多），否则将script元素放入 中head是一种反模式。把它们放在body，就在最后，就在结束</body>标签之前。这样，在它们上面定义的任何元素都将在您的代码运行之前由浏览器创建。