今天使用 VSCode 运行 js 脚本时总是报错 ReferenceError: document is not defined
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="Utf-8">
<title>testDom</title>
</head>
<body>
<h1>Love</h1>
<p id="para">Never give up.</p>
<script type="text/javascript">
var paragraph = document.getElementById('para'); // 不能调用 document.getElementById('para')
console.log(paragraph.id);
</script>
</body>
</html>
出现错误的原因是因为不了解 js 脚本的运行环境：
- js 脚本的运行环境有浏览器环境和 Node.js 两种，根据 Node.js 官方网站的介绍，Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.
- 上述代码调用了 Document 类型提供的方法 getElementById()，属于 DOM 的应用，但是对于 DOM 和 BOM 的操作只有在浏览器环境下才能进行，
- 而在 VSCode 这里我是用插件 Code Runner 来运行 js 脚本的，Code Runner 的配置是 Node.js
环境，如果操作 DOM 就会报错。
如果要了解更多两种运行环境的区别，请参考 https://blog.csdn.net/weixin_44114310/article/details/90452246。
如果要在 Node.js 环境里使用浏览器环境下的 document 对象，可能得借助 Node.js 库 jsdom，我没有实际操作过，详情请参考 https://cloud.tencent.com/developer/article/1438893。
这次的错误折腾了我一个上午，都快崩溃了，说到底还是自身的基础不够扎实，不过也让我学习了解了谷歌开发者工具 Chrome DevTools，之前一直依赖于 VSCode，也算是有所收获吧。