我正在学习 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 上我得到“ReferenceError:文档未定义”
我该如何解决这个问题？
最佳答案
yet on Atom I get
如果您的意思是 Atom，您的文本编辑器，正在突出显示它并向您显示一个警告 document是未定义的，只是 Atom 没有意识到您正在 document 的浏览器上下文中运行该代码将被定义。
它可能有一个设置，您可以告诉它您将在浏览器中运行代码，因此它可以采用默认的全局变量集( window 、 document 等)。
如果script.js中的代码正是你所展示的，虽然 Atom 显示的错误不会成为问题(因为在浏览器中， document 不会是 undefined )，你会得到 null从 getElementById 返回因为您的代码在元素存在之前运行。同样，这是假设代码是独立的，而不是(比如说)在 DOMContentLoaded 中。处理程序或类似的。
除非你有充分的理由这样做(而且理由不多)，否则将 script head 中的元素是一种反模式。把它们放在 body ，就在最后，就在结束之前 </body>标签。这样，在它们之上定义的任何元素都将在您的代码运行之前由浏览器创建。
关于javascript - 获取文档未定义，来自 document.getElementById，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41225295/