使用 Cheerio 进行 Web 抓取无法使用某些元素

Question

我刚开始学习网络抓取，我发现了这个教程： https://www.mundojs.com.br/2020/05/25/criando-um-web-scraper-com-nodejs/

它工作正常，但我试图从同一个网页获取不同的元素：https://ge.globo.com/futebol/brasileirao-serie-a/

对于本教程的类组，它将所有元素与所选类一起带来，但对于其他类则不起作用：

可以看出，ranking-item-wrapper 类的所有 50 个元素都被返回，但如果我选择 lista-jogos__jogo 类的元素，它不会返回任何东西：

我不明白为什么会出现此错误，因为我正在做与教程中所做的完全相同的事情。

这是代码的简短版本：

const axios = require('axios');
const cheerio = require('cheerio');
const url = 'https://ge.globo.com/futebol/brasileirao-serie-a/';

axios(url).then(response => {
  const html = response.data;
  const $ = cheerio.load(html);
  console.log($('.ranking-item-wrapper')) // => tutorial class
  console.log('***')
  console.log($('.lista-jogos__jogo')) // => class that I'm using
}).catch(console.error);

Answer 1

我从@Bradley 那里看到了答案，虽然它解释了正在发生的事情，但它没有提供解决方案。他说元素被附加了Javascript是正确的。有几种方法可以处理此问题以获取相同的数据。

我看到您关于等待元素加载的回复，这可以使用 JSDOM/Puppeteer 之类的东西，但它完全是矫枉过正，很可能会导致不支持的 JS 和/或大量 CPU/内存开销与类似 Cheerio。

通常，根据我的经验，元素被附加到 Javascript 的原因是数据是从 API 外部提取的，这是一个简单的修复，因为您只需检查网络工具要查看获取数据的 XHR 请求，通常它也采用更易于解析的格式，因为它是从 API (JSON) 中提取的。这在当今所有客户端渐进式 Web 应用程序中都很常见。

另一种方法是将数据硬编码在站点脚本中，该脚本可以拆分为可解析的格式。您可能会在利用服务器端渲染来获得 SEO 优势的渐进式 Web 应用程序中看到这一点。

我发现数据来自返回 JSON 数据的外部 API。网址是：

https://api.globoesporte.globo.com/tabela/d1a37fa4-e948-43a6-ba53-ab24ab3a45b1/fase/fase-unica-campeonato-brasileiro-2021/rodada/38/jogos/

您将需要请求此 URL 并解析 JSON 响应以获取您需要的数据，而不是使用 Cheerio。

Answer 2

看起来这些元素是在页面加载时使用 JavaScript 添加的。

如果您在禁用 JavaScript 的浏览器中检查页面，您会发现这些元素不存在，因此当您使用 Cheerio 下拉页面时它们也不会存在。