Node.js运行前端代码出现ReferenceError: document is not defined求助

问题场景 #

在WebStorm中使用Node.js运行前端脚本时，抛出如下错误：

const title = document.getElementById('main-heading');
              ^

ReferenceError: document is not defined

相关代码：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <main class="container">
        <h1 id="main-heading"> Movies </h1>
        <div class="movie-list">
            <ul>
                <li class="list-items"> Thor </li>
                <li class="list-items"> Batman </li>
            </ul>
        </div>
    </main>
    <script type="application/javascript" src="script.js"></script>
</body>
</html>

JavaScript代码 #

const title = document.getElementById('main-heading');
console.log(title);

错误原因 #

• document是浏览器提供的DOM（文档对象模型）接口，专门用于操作网页内容。Node.js是服务器端运行环境，没有浏览器的DOM环境支撑，直接用Node.js执行依赖document的脚本必然找不到该对象。
• 你当前是用Node.js单独运行了script.js，但这个脚本是设计为随HTML页面在浏览器中加载执行的，并非适用于Node.js环境。

解决方案 #

1. 直接在浏览器中运行HTML页面：右键点击项目中的HTML文件，选择「Open in Browser」，浏览器加载页面时会自动执行关联的script.js，此时浏览器会提供document对象，脚本就能正常获取页面元素。
2. 若需在Node.js中模拟DOM（非必要）：如果确实需要在Node.js环境操作DOM，可以使用jsdom库模拟浏览器环境，但你的场景下无需这么做，直接用浏览器运行即可。

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