VS Code运行node script.js报ReferenceError: document is not defined如何解决

核心错误1：混淆了JavaScript的运行环境 #

• document是浏览器专属的DOM API，Node.js作为服务端JavaScript运行时，原生不提供浏览器的DOM、BOM相关接口，因此直接在终端执行node script.js必然会抛出ReferenceError: document is not defined的报错。前端脚本不需要通过Node命令执行，直接在浏览器中打开index.html文件即可正常加载运行。

核心错误2：script标签属性拼写错误 #

• 你提供的HTML引入代码中，资源路径属性拼写错误：

  <!-- 错误写法，属性为scr -->
  <script scr="script.js" defer></script>
  

  正确的资源路径属性为src，拼写错误导致浏览器根本没有加载到你的script.js文件，因此页面始终保持静态，和JS文件没有联动。

额外优化建议 #

• 不需要在head和body两处重复引入script.js，保留任意一处即可：如果放在head中就保留defer属性，放在</body>标签前的话可以不加defer，重复引入会导致代码多次执行，可能引发异常。
• 你之前尝试的browserify、jsdom和当前场景完全不匹配：browserify是用于前端CommonJS模块打包的工具，jsdom是用于在Node环境下模拟DOM接口的工具，都不是解决你当前问题的方案，不需要额外安装使用。

验证步骤 #

1. 将script标签的scr修改为src，删除其中一处重复的script引入
2. 不要用Node命令执行script.js，直接双击打开index.html，或是用本地静态服务访问HTML文件，即可看到预期的动态效果。

内容的提问来源于stack exchange，提问作者thhhhhhhh