在Puppeteer中如何高效选择指定节点下所有class为section-item的子节点？

针对你的需求（忽略层级，获取section-one下所有class为section-item的元素），最简洁高效的方式是直接使用复合CSS选择器一次性定位，无需分步获取父元素再查询子节点。

核心实现方法 #

利用CSS选择器的后代匹配规则，#section-one .section-item 会直接选中id="section-one"节点下所有层级的section-item元素。浏览器原生的选择器引擎已经对这类查询做了深度优化，效率和分步查询几乎无差，但代码更简洁易维护。

1. 获取所有元素对象 #

使用page.$$()方法返回所有匹配的元素句柄：

const sectionItems = await page.$$('#section-one .section-item');

2. 直接提取元素内容（更常用） #

如果需要直接获取元素的文本、属性等内容，用page.$$eval()可以避免多次异步调用，效率更高：

// 获取所有元素的文本内容
const itemTexts = await page.$$eval('#section-one .section-item', elements => 
  elements.map(el => el.textContent.trim())
);

// 获取所有元素的自定义属性（比如data-id）
const itemIds = await page.$$eval('#section-one .section-item', elements => 
  elements.map(el => el.dataset.id)
);

和分步查询的对比 #

你提到的分步查询方法（先获取section-one，再查子元素）是可行的，但没必要：

// 分步实现（功能等价，但代码冗余）
const sectionOne = await page.$('#section-one');
const sectionItems = await sectionOne.$$('.section-item');

这种方式和复合选择器的底层逻辑一致（都是在section-one的上下文内查询后代元素），但多了一次异步调用，代码更繁琐，没有效率优势。

备选：XPath方式 #

如果偏好XPath，也可以实现同样需求，但CSS选择器在这类场景下更直观：

// 精确匹配class（注意：如果元素有多个class，该写法不适用）
const sectionItems = await page.$x('//div[@id="section-one"]//div[@class="section-item"]');

// 模糊匹配class（兼容多class场景）
const sectionItems = await page.$x('//div[@id="section-one"]//div[contains(concat(" ", @class, " "), " section-item ")]');

总结 #

优先选择**复合CSS选择器+page.$$()/page.$$eval()**的组合，这是Puppeteer中处理此类场景的标准最佳实践：代码简洁、效率高，且符合浏览器原生优化路径。

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