如何从客户端将HTML文档元素发送至Node.js服务端

执行JSON.stringify(document.documentElement)得到空对象，核心原因是DOM节点属于浏览器提供的宿主对象，和普通JS对象有本质区别：

• 绝大多数DOM属性是不可枚举的，JSON序列化只会处理对象自身的可枚举属性
• DOM结构存在天然循环引用（比如子元素的parentNode指向父元素，父元素的children列表又包含子元素），JSON序列化本身不支持循环引用结构，遇到就会丢失内容甚至报错。

不需要序列化DOM对象，直接获取当前文档的完整HTML字符串发送到服务端即可。DOM元素的outerHTML属性会返回节点的实时HTML字符串，包含所有JS运行后修改过的DOM状态，完全满足快照需求。

客户端代码修改 #

• 拼接文档声明（DOCTYPE）和html节点的outerHTML，拿到完整的页面HTML内容
• 移除base标签前先做非空判断，避免元素不存在时报错
• 请求的Content-Type改成text/html，直接发送纯文本HTML，不需要转JSON

修改后的代码参考：

if (request.action == "take_snap") {
    // 移除base标签，先判断元素是否存在
    const base = document.querySelector('base');
    if (base) base.remove();
    // 拼接完整HTML，包含DOCTYPE声明
    const pageHtml = `<!DOCTYPE html>${document.documentElement.outerHTML}`;
    const req = new XMLHttpRequest();
    const baseUrl = "http://localhost:3000/saveSnap";

    req.open("POST", baseUrl, true);
    // 直接发送html文本，不需要用json格式
    req.setRequestHeader("Content-type", "text/html;charset=utf-8");
    req.send(pageHtml);

    req.onreadystatechange = function() {
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
            console.log("快照保存成功");
        }
    }
}

Node.js服务端实现 #

以常用的Express框架为例，服务端收到HTML字符串后，可以直接存为本地.html文件。需要修改链接的话推荐用cheerio库做DOM解析处理，语法和jQuery一致，轻量无浏览器环境依赖：

1. 先安装依赖：npm i express cheerio
2. 服务端参考代码：

const express = require('express');
const fs = require('fs');
const cheerio = require('cheerio');
const app = express();

// 接收html文本的中间件，限制请求体大小避免大页面报错
app.use(express.text({ limit: '10mb' }));
// 托管存好的快照文件，后续访问直接返回静态文件
app.use('/snaps', express.static('./snaps'));

app.post('/saveSnap', (req, res) => {
    const html = req.body;
    // 加载HTML做自定义修改
    const $ = cheerio.load(html);
    // 示例：替换所有相对链接为绝对地址
    $('a[href], img[src], link[href], script[src]').each((i, el) => {
        const hrefAttr = el.tagName === 'img' || el.tagName === 'script' ? 'src' : 'href';
        const originUrl = $(el).attr(hrefAttr);
        if (originUrl && !originUrl.startsWith('http') && !originUrl.startsWith('data:')) {
            // 替换成你需要的域名前缀
            $(el).attr(hrefAttr, `https://your-domain.com${originUrl.startsWith('/') ? '' : '/'}${originUrl}`);
        }
    });
    // 处理完成后写入本地文件
    const finalHtml = $.html();
    if (!fs.existsSync('./snaps')) fs.mkdirSync('./snaps');
    // 文件名可以按业务规则生成，比如用时间戳+随机id
    const fileName = `./snaps/snap-${Date.now()}.html`;
    fs.writeFileSync(fileName, finalHtml, 'utf-8');
    res.send({ code: 0, msg: '保存成功', path: fileName });
});

app.listen(3000, () => {
    console.log('服务运行在3000端口');
});

补充说明 #

• 这种方式拿到的快照是JS执行完成后的实时DOM状态，比服务端直接爬取页面初始源码的还原度高很多，用户在页面上的动态操作修改的内容都会被包含进去
• 如果需要额外保留页面的滚动位置、表单输入值等状态，可以在取HTML前先把这些值写到对应DOM的attribute上，服务端处理时不需要额外调整
• 如果页面体积较大，可以在发送前对HTML做简单的gzip压缩，减少传输耗时

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