如何在Puppeteer中按类名统计元素？动态页面滚动获全量元素

我之前处理动态页面爬取时也遇到过完全一样的问题，其实Puppeteer提供的API完全能搞定这个需求，不用纠结文档没写清楚——咱们直接上实际的解决方案：

核心步骤拆解 #

1. 统计指定类名的元素数量 #

要统计页面中某个类名的元素总数，用page.$$eval()就够了。这个方法会在浏览器的上下文里执行选择器，然后返回你想要的计算结果，非常适合做元素数量统计：

// 把.your-target-class换成你要统计的类名
const currentCount = await page.$$eval('.your-target-class', elements => elements.length);

它的逻辑是：先找到所有匹配该类名的元素，然后返回这个元素集合的长度，完美对应你要的当前元素数量。

2. 循环滚动直到加载完所有元素 #

既然你已经知道总元素数量，那写个循环来持续检查+滚动就好。这里有两种等待新元素加载的方式，你可以根据页面情况选：

方式一：固定等待时间（简单直接）

如果页面加载速度比较稳定，直接等几秒让新元素加载出来就行：

const puppeteer = require('puppeteer');

async function loadAllElements() {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('你的目标页面URL');

  const totalElements = 150; // 你已知的总元素数
  let currentCount = 0;

  while (currentCount < totalElements) {
    // 统计当前元素数量
    currentCount = await page.$$eval('.your-target-class', els => els.length);
    console.log(`已加载：${currentCount}/${totalElements}`);

    if (currentCount >= totalElements) break;

    // 滚动到页面底部触发加载
    await page.evaluate(() => {
      window.scrollTo(0, document.body.scrollHeight);
    });

    // 等待1秒让新元素加载，可根据页面调整时间
    await page.waitForTimeout(1000);
  }

  // 现在所有元素都加载完成，提取你需要的信息
  const allData = await page.$$eval('.your-target-class', els => {
    return els.map(el => ({
      text: el.textContent.trim(),
      // 示例：提取元素的data-id属性
      id: el.getAttribute('data-id'),
      // 按需添加其他属性
    }));
  });

  console.log('所有元素信息:', allData);
  await browser.close();
}

loadAllElements();

方式二：智能等待元素数量增加（更可靠）

如果页面加载速度不稳定，固定等待可能会浪费时间或者加载不完整，这时候用page.waitForFunction()来等待元素数量变化会更靠谱：

// 替换循环里的等待部分
await page.waitForFunction(
  (selector, current) => document.querySelectorAll(selector).length > current,
  {}, // 配置参数，留空即可
  '.your-target-class',
  currentCount // 传递当前元素数量到浏览器上下文
);

这个方法会一直等到元素数量确实超过当前值才继续，不用猜等待时间。

额外注意事项 #

• 有些页面的滚动加载可能需要滚动到最后一个目标元素的位置，而不是页面底部，这时候可以先找到最后一个元素，再滚动到它的位置：

  await page.evaluate(selector => {
    const lastEl = document.querySelectorAll(selector)[document.querySelectorAll(selector).length - 1];
    lastEl.scrollIntoView({ behavior: 'smooth', block: 'end' });
  }, '.your-target-class');
  

• 如果页面有反爬机制，滚动速度不要太快，可以适当增加等待时间，或者模拟更自然的滚动行为。
• 记得处理异常情况，比如页面加载失败、选择器错误等，可以给代码加上try-catch块。

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