如何通过Puppeteer获取HTML元素子元素及其计算样式以构建HTML树？

嘿，这问题我熟！你已经搞定了单个元素的HTML和计算样式获取，要扩展成包含子元素的树结构，核心就是在浏览器上下文里写一个递归遍历函数——毕竟Puppeteer的page.evaluate允许我们直接在浏览器环境中操作DOM，正好适合做这种DOM树的遍历。

完整实现代码 #

直接上可运行的代码，你可以直接复用：

// 定义一个递归函数，在浏览器上下文里执行，用来遍历元素树
async function buildStyledElementTree(element) {
    // 获取当前元素的计算样式，转成普通可序列化对象
    const computedStyle = JSON.parse(JSON.stringify(getComputedStyle(element)));
    
    // 递归处理所有子元素（只处理元素节点）
    const childElements = Array.from(element.children).map(child => buildStyledElementTree(child));
    const children = await Promise.all(childElements);
    
    return {
        html: element.outerHTML,
        computedStyle,
        children
    };
}

// 在Puppeteer中调用这个函数
async function run() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('你的目标URL');
    
    // 获取body元素（用page.$更适合单个元素的场景）
    const bodyElement = await page.$('body');
    // 传入元素到浏览器上下文执行递归函数
    const styledHtmlTree = await page.evaluate(buildStyledElementTree, bodyElement);
    
    console.log(styledHtmlTree);
    await browser.close();
}

run();

关键细节说明 #

• 递归遍历逻辑：buildStyledElementTree函数会先处理当前元素的样式和HTML，再遍历element.children（这个属性只返回元素节点，自动过滤了文本、注释等非元素节点），对每个子元素递归调用自身，最后用Promise.all等待所有子元素的处理完成。
• 计算样式的处理：getComputedStyle返回的是一个特殊的CSSStyleDeclaration对象，直接序列化会丢失很多信息，所以用JSON.parse(JSON.stringify(...))把它转成普通的JS对象，方便后续使用或保存。
• 元素获取方式：用page.$('body')替代querySelectorAll，因为我们只需要单个body元素，这样更简洁高效。

可选扩展 #

如果你需要处理文本节点（比如保留文本内容），可以把element.children换成element.childNodes，然后添加节点类型判断：

// 修改递归函数里的子元素处理逻辑
const childNodes = Array.from(element.childNodes);
const children = await Promise.all(childNodes.map(node => {
    if (node.nodeType === 1) { // 元素节点
        return buildStyledElementTree(node);
    } else if (node.nodeType === 3) { // 文本节点
        return {
            type: 'text',
            content: node.textContent.trim()
        };
    }
    // 其他节点类型（比如注释）可以按需处理
    return null;
}).filter(item => item !== null));

注意事项 #

如果页面DOM结构非常庞大，递归深度过高可能会导致栈溢出，这时候可以考虑改为迭代遍历（比如用栈或队列实现），或者限制递归深度，避免性能问题。

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