Node.js环境下TypeError: document.addEventListener不是函数问题求助

问题根源 #

你写的document = path.parse("../html/servers.html");这行代码直接把浏览器原生的document对象覆盖了。path.parse是Node.js的文件路径处理方法，返回的是一个文件路径信息对象，这个对象根本没有addEventListener、getElementById这些浏览器DOM API方法，所以不管你删不删addEventListener，都会报错。

解决步骤 #

1. 删除覆盖document的代码
   直接删掉document = path.parse("../html/servers.html");这行，浏览器会自动让document指向当前加载的HTML文档，不需要手动赋值。

2. 确保代码在浏览器环境运行
   你的HTML已经通过<script src="../public/servers.js"></script>引入了JS文件，只要在浏览器中直接打开这个HTML文件，或者通过后端（比如Express）托管后访问对应URL，代码就能在浏览器环境中正常执行——Node.js环境本身没有document对象，不能用Node.js直接跑前端DOM操作代码。

3. 修正后的JavaScript代码

document.addEventListener("DOMContentLoaded", function () {
  const avatar = document.getElementById("avatar");
  // 先判断userData是否存在，避免未定义报错
  if (userData?.data?.user) {
    avatar.src = `https://cdn.discordapp.com/avatars/${userData.data.user.id}/${userData.data.user.avatar}.png`;
  }
});

额外提醒 #

如果你的项目用Node.js做后端，前端JS文件要放在静态资源目录（比如public文件夹），通过后端框架的静态资源托管功能对外提供访问，不要尝试用Node.js直接执行前端DOM操作代码。

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