Node.js运行报错document未定义，无法获取文本动画节点列表求助

错误原因 #

document是浏览器专属的DOM API，Node.js运行在服务器端环境，没有浏览器的DOM上下文，直接用Node.js执行依赖document的代码必然报错。你修改launch.json里的runtimeVersion完全没用，因为问题和Node版本无关，是环境不匹配导致的。

解决办法 #

根据你的需求，分两种情况处理：

情况1：在浏览器中运行（推荐，因为你要做文本动画，最终肯定是在浏览器里生效） #

把代码放到HTML文件中，通过浏览器打开执行：

<!DOCTYPE html>
<html lang="zh-CN">
<body>
  <!-- 确保页面里有id为logo的svg元素和对应的path -->
  <svg id="logo">
    <path d="你的路径数据"></path>
    <!-- 其他path元素 -->
  </svg>

  <script>
    const logo = document.querySelectorAll('#logo path');
    console.log(logo);
    // 这里可以继续编写你的动画逻辑
  </script>
</body>
</html>

打开这个HTML文件，按F12调出浏览器控制台，就能看到输出的节点列表了。

情况2：必须在Node.js环境中处理DOM #

如果一定要用Node.js操作DOM，需要用jsdom库模拟浏览器环境：

1. 先安装依赖：

npm install jsdom

2. 修改你的app.js代码：

const { JSDOM } = require('jsdom');

// 构造包含目标元素的模拟HTML文档
const dom = new JSDOM(`
  <svg id="logo">
    <path d="路径1"></path>
    <path d="路径2"></path>
    <!-- 替换成你实际的path元素 -->
  </svg>
`);

// 获取模拟的document对象
const document = dom.window.document;
const logo = document.querySelectorAll('#logo path');
console.log(logo);

现在执行node app.js就能在终端看到节点列表了。

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