如何在Node.js Express中获取HTMLElement？

核心结论 #

直接在Express的Node.js服务器代码中调用document.querySelector()或document.getElementById()是行不通的。因为document是浏览器环境提供的DOM对象，Node.js服务器端没有这个内置对象，直接调用会抛出ReferenceError: document is not defined错误。

两种可行解决方案 #

1. 在客户端（浏览器）中处理DOM

这是最常规的做法：将操作DOM的代码放在前端HTML文件的<script>标签内，当浏览器加载页面后，自然会提供document对象。

修改你的index.html，添加客户端脚本：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="div"> Hello world! </div>

<script>
  // 这里运行在浏览器环境，可正常使用document API
  const targetDiv = document.querySelector("#div");
  console.log(targetDiv.textContent); // 浏览器控制台输出 " Hello world! "
</script>
</body>
</html>

2. 服务器端需解析HTML时用第三方库

如果必须在Node.js服务器端处理HTML元素（比如爬虫、预渲染场景），可以使用cheerio——一个模拟jQuery API的库，支持类似querySelector的选择器语法。

步骤如下：

• 安装依赖：

  npm install cheerio
  

• 修改index.js代码，用cheerio解析HTML：

  const express = require('express');
  const cheerio = require('cheerio');
  const fs = require('fs');
  const path = require('path');
  
  const app = express();
  
  app.get('/', (req, res) => {
    const htmlFilePath = path.join(__dirname, 'Public', 'index.html');
    fs.readFile(htmlFilePath, 'utf8', (err, htmlContent) => {
      if (err) {
        return res.status(500).send('加载页面失败');
      }
      // 用cheerio加载HTML，模拟DOM环境
      const $ = cheerio.load(htmlContent);
      // 类似jQuery的选择器语法获取元素
      const divText = $('#div').text();
      console.log(divText); // 服务器控制台输出 " Hello world! "
      res.send(htmlContent);
    });
  });
  
  app.use(express.static('Public'));
  
  app.listen(3000, () => console.log('started'));
  

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