WebStorm环境下JavaScript document未定义问题求助

问题根源 #

你直接用Node.js运行了app.js文件，但Node.js是服务端运行环境，没有浏览器提供的document、window这些DOM/BOM对象，所以才会触发这个报错。前端JS代码必须在浏览器环境里才能访问document这类浏览器专属对象。

正确运行方式 #

1. 确认你的index.html已经通过<script>标签正确引入app.js（从截图看你已经加了<script src="app.js"></script>，这步没问题）
2. 不要用node app.js命令执行JS文件，而是：
   • 直接双击打开index.html文件，让浏览器加载页面并执行里面的JS代码
   • 或者在IDE里安装比如Live Server这类插件，右键点击index.html选择"Open with Live Server"，通过本地服务器打开页面

额外说明 #

如果之后你需要用到Node.js做前端工程化（比如打包、构建），那是另一回事，但现阶段你学习HTML/CSS/JS结合开发，只需要在浏览器环境里运行页面就够了。

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