Puppeteer爬虫遍历elementHandles报错：tds.forEach不是函数求助

嘿，我帮你捋捋这个爬虫的问题！你遇到的UnhandledPromiseRejectionWarning: TypeError: tds.forEach is not a function，核心原因就是你拿到的tds不是正经的数组——要么是DOM查询返回的NodeList，要么是Puppeteer里没正确处理的ElementHandle集合，咱一步步解决：

场景1：用Puppeteer直接操作ElementHandle（适合需要单独处理元素句柄的场景） #

如果你已经拿到了行元素的ElementHandle列表，得注意$$('td')是异步操作，要加await才能拿到真正的ElementHandle数组，然后用for...of遍历就行：

// 假设你已经通过page.$$('tr')拿到了行元素句柄数组 rowHandles
for (const rowHandle of rowHandles) {
  // 异步获取当前行的所有td句柄
  const tds = await rowHandle.$$('td');
  
  // 遍历每个td，获取文本或innerHTML
  for (const td of tds) {
    // 获取纯文本内容
    const text = await td.evaluate(el => el.textContent);
    // 或者获取带标签的HTML内容
    // const html = await td.evaluate(el => el.innerHTML);
    
    console.log(text); // 输出到标准输出
  }
  
  // 记得释放句柄，避免内存泄漏
  await rowHandle.dispose();
}

场景2：在浏览器上下文里直接操作DOM（更高效，减少Puppeteer和浏览器的通信） #

把逻辑放到page.evaluate()里执行，直接操作浏览器里的DOM。这里拿到的tds是NodeList，虽然不是数组，但可以用Array.from()转成数组再forEach，或者现代浏览器里NodeList本身也支持forEach：

await page.evaluate(() => {
  // 替换成你实际的行选择器
  const rows = document.querySelectorAll('table tr');
  
  rows.forEach(row => {
    const tds = row.querySelectorAll('td');
    
    // 方法1：转成数组再遍历（兼容所有环境）
    Array.from(tds).forEach(td => {
      console.log(td.textContent); // 输出纯文本
      // console.log(td.innerHTML); // 输出HTML内容
    });
    
    // 方法2：直接用NodeList的forEach（现代浏览器支持）
    // tds.forEach(td => {
    //   console.log(td.textContent);
    // });
  });
});

顺便说下textContent和innerHTML的区别 #

• textContent：只提取元素里的纯文本，包括子元素的文本，完全忽略HTML标签
• innerHTML：会把元素内部的所有内容（包括标签、属性、文本）以HTML字符串的形式返回

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