使用 WebStorm 时出现“ReferenceError：文档未定义”答案

【问题标题】："ReferenceError: document is not defined" while using WebStorm使用 WebStorm 时出现“ReferenceError：文档未定义”
【发布时间】：2021-10-14 06:26:49
【问题描述】：

我正在使用 WebStorm IDE，并且正在为我的 HTML 和 JS 编写一个简单的测试。代码如下：

JavaScript (index.js)：

const cool = document.getElementByClassName('error');

cool.innerText = 'test';

HTML (index.html)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "index.js"></script>
</head>
<body>
    <h1 class="theWhat">The DOM</h1>
    <p>Hello World</p>
    <p class="error">Error!</p>
</body>
</html>

JavaScript 对任何“p”标签都没有任何作用，当我在其中运行它时，我遇到了这个错误：

const pars = document.querySelectorAll('p'); ^ ReferenceError：文档未定义在对象。 (C:\Users\sethz\WebstormProjects\jscourse\chapter2\index.js:124:14)

←[90m at Module._compile (node:internal/modules/cjs/loader:1101:14)←[39m

←[90m at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)←[39m

←[90m at Module.load (node:internal/modules/cjs/loader:981:32)←[39m

←[90m at Function.Module._load (node:internal/modules/cjs/loader:822:12)←[39m

←[90m at Function.executeUserEntryPoint as runMain←[39m

←[90m at node:internal/main/run_main_module:17:47←[39m

进程以退出代码 1 结束

我读过它与解释器有关，但我不知道如何解决。

注意：

我正在使用 Node.js。在我删除它以更新到最新的 WebStorm (2021) 之前，我从来没有遇到过这个问题

【问题讨论】：

除了那个错误——代码还是错误的......因为pars是一个NodeList（一个类似数组的对象）——所以，试图把它当作一个元素来使用不会工作
你在 node js 上运行这个 javascript 代码吗？
@ssethzz 文档对象适用于浏览器 javascript。 Node js运行时环境与浏览器javascript不同。
@ssethzz - 什么？好吧，我想现在cool 是一个 NodeList ...变量的名称无关紧要，内容是问题-无论如何，这不是您的问题，您的问题是您显然是在尝试执行使用nodejs的网页-我认为您需要退后一步并意识到网页显示在浏览器上-并且您的“代码”是HTML（其中包含脚本），而不是javascript（
您有多个问题，首先：<script src = index.js></script> 缺少 qouts，它应该变成：<script src="index.js"></script> 添加到您的 javascript 在加载 dom 之前正在执行，并且在使用 document.querySelectorAll() 时它' 将返回一个 NodeList ，您需要遍历其元素以逐一更改它们：const pars = document.querySelectorAll('p'); pars.forEach(el => el.innerHTML = "test");

标签： javascript html node.js

【解决方案1】：

感谢所有帮助的人。我已经使用了一些答案，有些工作。我也找到了另一种无需额外代码的方法。我访问了网站http://vanilla-js.com/，它下载了一个包含 DOM 操作的脚本文件。我所要做的就是折射它并在我的 IDE (WebStorm) 中根据自己的喜好更改它的名称。

【讨论】：

【解决方案2】：

要将 javascript 文件包含到 html 页面中，您需要声明静态目录在你的 index.js/app.js 中。

const express = require('express');
const app = express();
app.use(express.static('public')) // static file
app.listen(8000, console.log(`Server started on port 8000`))

我们将根目录中的“公共”文件夹声明为静态文件夹。然后，如果您在公共文件夹中有一个 public/index.js（对于浏览器），请照常将其添加到您的 html 页面

<script src="/index.js"></script>

注意，在浏览器中使用静态文件时，不需要指定公用文件夹。

【讨论】：