如何用Node.js结合Puppeteer统计网页指定div下的子div数量

首先明确：Node.js是服务端运行环境，没有浏览器的DOM环境，直接用document对象肯定会报错——这是正常情况，得用能模拟浏览器行为的工具，你选的Puppeteer就很合适，直接用它实现需求就行。

下面是针对你目标网页的完整实现步骤：

1. 先安装Puppeteer：

npm install puppeteer

2. 编写统计脚本（比如命名为count-divs.js）：

const puppeteer = require('puppeteer');

(async () => {
  // 启动无头浏览器
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();

  try {
    // 访问目标网页，等待网络请求基本完成
    await page.goto('http://www.uitu.edu.pk/', { waitUntil: 'networkidle2' });

    // 等待目标容器加载完成，避免异步加载导致获取不到元素
    await page.waitForSelector('#cards_landscape_wrap-2 > div > div.row');

    // 在浏览器上下文执行DOM操作，统计子div数量
    const divCount = await page.evaluate(() => {
      const container = document.querySelector('#cards_landscape_wrap-2 > div > div.row');
      // 只统计容器的直接子div，排除嵌套层级的div
      const childDivs = container.querySelectorAll(':scope > div');
      return childDivs.length;
    });

    console.log(`目标容器下的子div数量：${divCount}`);
  } catch (error) {
    console.error('执行出错：', error);
  } finally {
    // 关闭浏览器
    await browser.close();
  }
})();

3. 运行脚本：

node count-divs.js

关键说明： #

• page.evaluate()是核心：这个方法里的代码运行在浏览器的DOM环境中，所以能正常使用document、querySelector等浏览器API。
• :scope > div确保只统计容器的直接子div，不会把嵌套在更深层级的div算进去，完全匹配你要统计row容器下子div的需求。
• waitForSelector和waitUntil: 'networkidle2'是为了确保页面和目标元素完全加载，避免出现统计结果为0的情况。

运行后就能得到你预期的6个数量。

内容的提问来源于stack exchange，提问作者Bilawal Wajid Ali