使用Node.js+TS调用HTML元素时出现document未定义错误求助

ReferenceError: document is not defined 是因为你在Node.js环境中运行了浏览器专属的DOM代码——document是浏览器提供的DOM API，Node.js作为服务器端环境没有这个对象，直接执行会报错。

1. 明确代码归属 #

• 包含document、addEventListener的DOM操作代码属于前端代码，必须在浏览器中运行，不能用Node.js直接执行。
• Node.js负责后端逻辑，比如处理/prog/callback这个POST请求接口。

2. 前端代码（HTML+TypeScript） #

步骤1：编写HTML页面（比如index.html）

把按钮、输入框和编译后的JS文件引入：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input type="date" id="startdate">
  <input type="date" id="enddate">
  <button id="xbutton">执行操作</button>

  <!-- 引入编译后的前端JS文件 -->
  <script src="./dist/frontend.js"></script>
</body>
</html>

步骤2：编写前端TypeScript代码（比如frontend.ts）

修正原代码的变量名错误（saftbutton改为xbutton），补充错误处理：

document.addEventListener('DOMContentLoaded', () => {
  const xbutton = document.getElementById('xbutton') as HTMLButtonElement;

  xbutton.addEventListener('click', async () => {
    try {
      const startdateInput = document.getElementById('startdate') as HTMLInputElement;
      const enddateInput = document.getElementById('enddate') as HTMLInputElement;

      const startDate = startdateInput.value;
      const endDate = enddateInput.value;

      console.log('Start Date:', startDate);
      console.log('End Date: ', endDate);

      const response = await fetch('/prog/callback', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ startDate, endDate })
      });

      // 处理后端返回的响应
      const result = await response.json();
      console.log('接口返回结果:', result);
    } catch (error) {
      console.error('请求出错:', error);
    }
  });
});

步骤3：编译前端TS代码

配置tsconfig.json（确保输出目录和HTML引入路径一致）：

{
  "compilerOptions": {
    "target": "ES6",
    "outDir": "./dist",
    "strict": true
  }
}

运行编译命令：

tsc

3. 后端代码（Node.js+TypeScript） #

用Express框架搭建服务器，处理POST请求并托管前端静态文件：

import express from 'express';
const app = express();
const PORT = 3000;

// 解析JSON格式的请求体
app.use(express.json());

// 处理/prog/callback的POST请求
app.post('/prog/callback', async (req, res) => {
  const { startDate, endDate } = req.body;
  console.log('收到前端传入的日期:', startDate, endDate);

  // 这里执行你的后端逻辑，比如调用start(2)
  // await start(2); 假设start是你的后端业务函数

  res.json({ status: 'success', message: '日期处理完成' });
});

// 托管前端静态文件（HTML、编译后的JS）
app.use(express.static('.'));

app.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}`);
});

安装依赖并启动后端：

npm install express @types/express typescript ts-node
ts-node backend.ts

4. 测试运行 #

1. 启动后端服务器后，在浏览器打开http://localhost:3000
2. 选择日期并点击按钮，查看浏览器控制台和后端终端的日志

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