JavaScript 中的“ReferenceError：document is not defined”错误是尝试在浏览器环境（例如Node.js）之外访问文档对象时发生的常见问题。如果脚本在 HTML 文档完全加载之前执行，也会出现这种错误。 本文将探讨导致此错误的原因，并提供解决方法。
问题陈述
文档对象是 Web API 的一部分，只能在浏览器上下文中使用。 在 Node.js 等环境中运行 JavaScript 时，文档对象不可用，从而导致 "ReferenceError"。 此外，在浏览器完全加载页面之前尝试访问文档对象也会导致此错误。
请看下面的 JavaScript 代码：
console.log(document.getElementById("myElement"));
如果在 Node.js 环境中运行此代码，就会出现错误：
ReferenceError： document is not defined“（JavaScript 中的 ReferenceError： document is not defined）
解决错误的方法
为了解决这个问题，我们需要确保在适当的环境（浏览器）和正确的时间（DOM完全加载后）访问文档对象。
1. 检查环境
如果代码依赖于文档对象，请确保代码在浏览器环境中运行。 如果我们需要在 Node.js 中运行代码，则应使用 jsdom 等库来模拟浏览器环境。
2.使用 window.onload
确保脚本在加载完整个页面后运行：
window.onload = function() {
console.log(document.getElementById("myElement"));
};
3.使用 DOMContentLoaded 事件
确保脚本在 DOM 完全加载后并且在图像以及样式表等其他资源之前运行：
document.addEventListener("DOMContentLoaded", function() {
console.log(document.getElementById("myElement"));
});
4. 将脚本放在正文的末尾
将脚本标记放在正文部分的末尾，以便它们在解析 HTML 后运行：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Error Example</title>
</head>
<body>
<div id="myElement">Hello World</div>
<script>
console.log(document.getElementById("myElement"));
</script>
</body>
</html>
示例：通过使用 window.upload 来修复上述错误。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document Error Example</title>
</head>
<body>
<div id="myElement">Hello World</div>
<script>
window.onload = function() {
console.log(document.getElementById("myElement"));
};
</script>
</body>
</html>
输出
<div id="myElement">Hello World</div>
示例：通过使用 DOMContentLoaded 事件来修复上述错误的实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Error Example</title>
</head>
<body>
<div id="myElement">Hello World</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log(document.getElementById("myElement"));
});
</script>
</body>
</html>
输出
<div id="myElement">Hello World</div>
