Express POST接口操作DOM报document is not defined如何解决

架构老林

2026-8-27

问题原因

document is not defined报错的核心是运行环境不匹配：

document是浏览器专属的DOM全局对象，仅存在于用户访问页面时的浏览器运行环境中，Node.js服务端环境不存在这个对象，直接调用必然抛出未定义错误。
你当前把DOM操作逻辑写在了Express的POST接口回调里，这段代码运行在本地Node服务进程中，服务端没有权限、也没有能力直接操作用户浏览器里打开的页面DOM。
你写的DOM操作本身还存在语法问题：document.body("sendMusics")是错误写法，document.body是直接指向body节点的属性，不是可调用的方法；同时你给多个动态生成的元素绑定了相同的dsmuixid，违反HTML中id必须全局唯一的规范；document.getElementById返回单个匹配元素，并不是数组，也不能按下标取值。

前后端代码的运行环境是完全隔离的：服务端跑在你的本地机器Node进程里，前端代码跑在访问页面的用户浏览器里，两者不能直接互相访问对方的变量、API，只能通过HTTP请求传递数据。

解决方法

要实现POST请求提交后页面新增div的效果，必须拆分前后端逻辑，不能混写：

服务端只负责接收、存储POST请求提交的数据，处理完成后给前端返回响应结果，不要在服务端写任何DOM操作代码，参考实现如下：

// Node.js/Express 服务端逻辑
// 临时存储数据，生产环境建议替换为数据库存储
const musicList = [];
const userList = [];

app.post('/tshirt/:id', (req, res) => {
  // 存储前端提交的参数
  musicList.push(req.body.Musica);
  userList.push(req.body.User);
  // 返回成功响应和最新数据
  res.status(200).json({
    code: 0,
    msg: '提交成功',
    data: musicList.map((music, idx) => ({
      music,
      user: userList[idx]
    }))
  })
})

所有DOM操作逻辑全部迁移到前端页面的脚本中，在浏览器环境执行。前端触发POST请求后，在请求成功的回调函数里执行创建、插入div的操作，参考实现如下：

// 前端浏览器端JS代码，写在HTML页面引入的script标签中
const submitBtn = document.getElementById('submitBtn');
// 监听提交动作
submitBtn.addEventListener('click', async () => {
  // 收集表单数据
  const params = {
    Musica: document.getElementById('musicInput').value,
    User: document.getElementById('userInput').value
  };
  // 向服务端发送POST请求
  const res = await fetch('/tshirt/1', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(params)
  });
  const result = await res.json();
  // 请求成功后操作DOM插入新节点
  if (result.code === 0) {
    const container = document.getElementById('sendMusics');
    const newItem = document.createElement('div');
    // 用class标识同类元素，不要用重复id
    newItem.className = 'music-card';
    newItem.style.cssText = 'background-color:blue; width:50%; height:75px; margin-top:1px; margin-left:2%; float:left;';
    const latestData = result.data[result.data.length - 1];
    newItem.innerHTML = `<label style="margin-top:15px;display:inline-block;margin-left:5%;">${latestData.music}(time)<br><br>&emsp;&emsp;&emsp;${latestData.user}</label>`;
    container.appendChild(newItem);
  }
})

修正原有DOM操作的语法问题：
- 同类重复元素用class属性标识，不要重复使用相同id
- 获取body节点直接用document.body，不要加括号当函数调用
- document.getElementById返回单个匹配元素，不要按下标取数组值

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