使用Puppeteer获取指定HTML元素包含子孙节点的完整HTML字符串

核心原理 #

DOM元素原生的outerHTML属性会返回包含元素自身标签、所有属性、以及所有子孙节点的完整序列化HTML字符串，完全匹配你的需求。如果不需要包含父元素自身的标签，仅需内部子孙内容，替换为innerHTML属性即可。

实现代码 #

方案1：直接在浏览器执行上下文获取（推荐，性能更高） #

// 先等待目标元素加载完成，避免获取为空
await page.waitForSelector('.page_content_post');

const fullHtmlList = await page.evaluate(() => {
  // 获取所有匹配的目标父元素
  const targetElements = document.querySelectorAll('.page_content_post');
  // 遍历返回每个元素的完整HTML字符串
  return Array.from(targetElements).map(element => element.outerHTML);
});

// 如果只需要第一个匹配的元素，可简化为：
// const singleFullHtml = await page.evaluate(() => document.querySelector('.page_content_post').outerHTML);

方案2：通过Puppeteer元素句柄获取 #

// 等待元素加载完成
await page.waitForSelector('.page_content_post');
// 获取所有匹配元素的句柄
const elementHandles = await page.$$('.page_content_post');
const fullHtmlList = [];

for (const handle of elementHandles) {
  // 针对单个元素句柄获取outerHTML
  const html = await handle.evaluate(el => el.outerHTML);
  fullHtmlList.push(html);
  // 释放元素句柄，避免内存泄漏
  await handle.dispose();
}

注意事项 #

• 如果需要输出的内容不包含父元素.page_content_post自身的标签，仅需要其内部所有子孙节点的内容，将代码中的outerHTML替换为innerHTML即可
• 如果页面是动态渲染的，必须在获取HTML前添加等待元素加载的逻辑，避免拿到空值或不完整的内容
• 如果目标元素只有一个，建议直接用querySelector/page.$代替querySelectorAll/page.$$，简化逻辑

内容的提问来源于stack exchange，提问作者Bernardo Benini Fantin