使用Cheerio做Web scraping时无法获取部分class对应元素如何解决

问题原因 #

你要匹配的lista-jogos__jogo元素对应的赛事列表，是页面加载完成后通过客户端JavaScript异步渲染生成的。使用axios直接请求页面地址，只能拿到服务端返回的初始静态HTML，此时赛事列表还未渲染，因此cheerio无法匹配到对应元素。而教程中使用的ranking-item-wrapper对应的排名数据是直接内置在初始静态HTML中的，所以可以正常获取。

解决方案 #

有两种常用的解决思路：

• 抓异步数据接口：打开浏览器开发者工具的「网络」面板，筛选「Fetch/XHR」请求后刷新页面，找到赛事列表对应的后端接口，直接请求该接口获取结构化的JSON数据，这种方式效率比解析DOM更高。
• 使用无头浏览器渲染后爬取：可以使用Puppeteer、Playwright这类支持模拟浏览器运行的工具，等待页面所有异步资源加载完成后再提取元素，示例代码如下：

const puppeteer = require('puppeteer');

(async () => {
  // 启动无头浏览器
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 跳转目标页面，等待网络空闲确保异步内容加载完成
  await page.goto('https://ge.globo.com/futebol/brasileirao-serie-a/', {
    waitUntil: 'networkidle2'
  });
  // 等待目标元素渲染完成
  await page.waitForSelector('.lista-jogos__jogo');
  // 提取所有匹配元素的内容
  const gameItems = await page.$$eval('.lista-jogos__jogo', elements => {
    return elements.map(item => item.textContent.trim());
  });
  console.log(gameItems);
  // 关闭浏览器
  await browser.close();
})();

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