如何通过Express/Node.js向HTML元素传递数据？

一、Node.js/Express无法直接操作浏览器DOM #

Node.js运行在服务器端，没有浏览器的DOM环境，document.querySelector、getElementById这类DOM操作API在Node环境中完全不可用，这是你伪代码里最核心的错误。服务器仅负责处理请求、生成响应，无法直接操控客户端的DOM元素。

二、正确的数据流实现方式 #

要把服务器抓取的数据传递到HTML元素中，常用两种方案：

方案1：模板引擎（服务器端渲染） #

借助EJS、Handlebars等模板引擎，直接在HTML模板中插入服务器数据。

1. 安装模板引擎（以EJS为例）：

npm install ejs

2. 配置Express使用EJS：

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views'); // 指定模板文件存放目录

3. 将index.html改为index.ejs，在需要插入数据的位置使用<%= 变量名 %>：

<!-- views/index.ejs -->
<h1><%= highestSoldCountry %></h1>
<div id="web-data"><%= highestSoldCountry %></div>
<div class="car-data"><%= mostSoldModel %></div>

4. 修改路由代码，抓取数据后渲染模板：

const https = require('https');

app.get("/", (req,res) => {
    const url = "https://asc.com";

    https.get(url, (response) => {
        let rawData = '';
        // 外部响应是分块返回的，需拼接完整数据后再处理
        response.on("data", (chunk) => {
            rawData += chunk;
        });

        response.on("end", () => {
            try {
                const webData = JSON.parse(rawData);
                const highestSoldCountry = webData.country;
                const mostSoldModel = webData.car.model;
                
                // 渲染模板并传递数据
                res.render('index', {
                    highestSoldCountry,
                    mostSoldModel
                });
            } catch (err) {
                console.error('解析数据出错:', err);
                res.status(500).send('服务器出错');
            }
        });
    }).on('error', (err) => {
        console.error('请求外部数据出错:', err);
        res.status(500).send('获取数据失败');
    });
});

方案2：客户端AJAX请求（前后端分离） #

如果想用纯静态HTML，可让客户端通过AJAX向Express接口请求数据，再用客户端JS操作DOM插入内容。

1. 编写API接口返回数据：

app.get("/api/car-data", (req,res) => {
    const url = "https://asc.com";

    https.get(url, (response) => {
        let rawData = '';
        response.on("data", (chunk) => rawData += chunk);
        response.on("end", () => {
            try {
                const webData = JSON.parse(rawData);
                res.json({
                    highestSoldCountry: webData.country,
                    mostSoldModel: webData.car.model
                });
            } catch (err) {
                res.status(500).json({error: '解析数据失败'});
            }
        });
    }).on('error', () => res.status(500).json({error: '获取数据失败'}));
});

2. 在静态HTML中发起请求并操作DOM：

<!-- public/index.html -->
<h1 id="country"></h1>
<div id="web-data"></div>
<div class="car-data"></div>

<script>
// 发起AJAX请求获取数据
fetch('/api/car-data')
    .then(res => res.json())
    .then(data => {
        // 客户端操作DOM插入数据
        document.getElementById('country').textContent = data.highestSoldCountry;
        document.getElementById('web-data').textContent = data.highestSoldCountry;
        document.querySelector('.car-data').textContent = data.mostSoldModel;
    })
    .catch(err => console.error('获取数据出错:', err));
</script>

3. 配置Express托管静态文件：

app.use(express.static(__dirname + '/public')); // 将静态文件放在public目录下

三、关键注意事项 #

• 每个请求只能发送一次响应，不要多次调用res.sendFile、res.render或res.send。
• 外部API的响应是分块返回的，必须在end事件中处理完整数据，不能在data事件中直接解析。
• 所有DOM操作都必须在客户端浏览器环境中完成，Node.js服务器无法执行此类操作。

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