如何在Puppeteer的ElementHandle中执行querySelector并获取innerHTML？

你已经通过page.$x()获取到了ElementHandle数组theXpath，接下来可以通过遍历数组，在每个ElementHandle上下文内执行目标选择器，进而获取元素的innerHTML，具体实现如下：

单个匹配元素的场景 #

如果每个父ElementHandle内只会有一个匹配目标选择器的元素，使用$eval方法：

// 遍历所有从Xpath获取到的ElementHandle
for (const element of theXpath) {
  try {
    // 在当前ElementHandle内部查找目标选择器对应的元素，获取其innerHTML
    const targetInnerHTML = await element.$eval(
      "div > div > span > span:nth-of-type(2)",
      el => el.innerHTML
    );
    console.log(targetInnerHTML);
    // 这里可以添加对innerHTML的后续处理逻辑
  } catch (err) {
    // 处理当前ElementHandle内找不到目标元素的情况
    console.log("当前父元素中未找到匹配选择器的节点");
  }
}

多个匹配元素的场景 #

如果每个父ElementHandle内可能存在多个匹配目标选择器的元素，使用$$eval方法获取所有匹配元素的innerHTML数组：

for (const element of theXpath) {
  try {
    // 获取当前ElementHandle内所有匹配选择器元素的innerHTML数组
    const targetInnerHTMLList = await element.$$eval(
      "div > div > span > span:nth-of-type(2)",
      els => els.map(el => el.innerHTML)
    );
    console.log(targetInnerHTMLList);
    // 处理innerHTML数组的逻辑
  } catch (err) {
    console.log("当前父元素中未找到匹配选择器的节点");
  }
}

关键说明 #

• element.$eval(selector, pageFunction)：在当前ElementHandle的作用域内，查找第一个匹配selector的元素，将该元素传入pageFunction执行后返回结果。
• element.$$eval(selector, pageFunction)：在当前ElementHandle的作用域内，查找所有匹配selector的元素，将元素数组传入pageFunction执行后返回结果。
• 添加try/catch是为了避免因个别父元素内无匹配节点导致整个流程中断。

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