Cheerio：利用CSS类选择器高效提取嵌套元素内容

Cheerio简介与核心概念

cheerio是一个快速、灵活且轻量级的node.js库，它为服务器端实现了jquery核心功能的一个子集。这意味着您可以在node.js环境中像在浏览器中使用jquery一样，通过熟悉的css选择器语法来解析、操作和遍历html或xml文档。这对于网页抓取（web scraping）、html内容解析和自动化测试等场景非常有用。

使用Cheerio的基本流程通常包括：

1. 发起HTTP请求获取HTML内容（例如使用axios）。
2. 将获取到的HTML内容加载到Cheerio实例中。
3. 使用CSS选择器选择目标元素。
4. 对选中的元素执行操作，如提取文本、属性或遍历子元素。

精准定位：类选择器与子元素选择器

在HTML文档中，元素通常通过类（class）属性进行分组和样式化。Cheerio完全支持CSS类选择器，使得通过类名定位元素变得异常简单和高效。

初始尝试与优化空间

考虑以下HTML结构片段：

<div class="chatbody overflow-y-auto flex-column">
  <div class="message-container">
    <span class="sender">User1:</span>
    <p class="message-text">Hello there!</p>
  </div>
  <div class="message-container">
    <span class="sender">User2:</span>
    <p class="message-text">Hi!</p>
  </div>
  <!-- 更多消息 -->
</div>

如果我们的目标是获取chatbody类元素下的所有直接子元素，并进一步提取它们内部的内容，最初可能会尝试使用如下方式：

立即学习“前端免费学习笔记（深入）”；

const cheerio = require("cheerio");
const htmlContent = `
<div class="chatbody overflow-y-auto flex-column">
  <div class="message-container">
    <span class="sender">User1:</span>
    <p class="message-text">Hello there!</p>
  </div>
  <div class="message-container">
    <span class="sender">User2:</span>
    <p class="message-text">Hi!</p>
  </div>
</div>`;

const $ = cheerio.load(htmlContent);

// 原始尝试：使用属性选择器定位，再获取子元素
let ChatBody = $('div[class="chatbody overflow-y-auto flex-column"]').children();
console.log("原始尝试的ChatBody:", ChatBody.html()); // .html() 用于查看内部HTML

这种方法虽然可以工作，但$('div[class="chatbody overflow-y-auto flex-column"]')显得冗长且不够灵活。当一个元素有多个类时，精确匹配所有类名可能导致选择器过于复杂或在类名顺序不一致时失效。

聚好用AI

可免费AI绘图、AI音乐、AI视频创作，聚集全球顶级AI，一站式创意平台

下载

推荐实践：简洁高效的类选择器

Cheerio支持标准的CSS类选择器，即使用点号（.）前缀来指定类名。对于具有多个类名的元素，只需选择其中一个关键类名即可。例如，对于<div class="chatbody overflow-y-auto flex-column">，我们可以简单地使用.chatbody来选中它。

要获取.chatbody元素下的所有直接子元素，并提取它们的文本内容，可以采用以下更简洁高效的方法：

const axios = require("axios");
const cheerio = require("cheerio");

// 假设这是从网络请求获取的HTML内容
const sampleHtml = `
<div class="chatbody overflow-y-auto flex-column">
  <div class="message-container">
    <span class="sender">User1:</span>
    <p class="message-text">Hello there!</p>
  </div>
  <div class="message-container">
    <span class="sender">User2:</span>
    <p class="message-text">Hi!</p>
  </div>
  <div class="message-container">
    <span class="sender">User3:</span>
    <p class="message-text">How are you?</p>
  </div>
</div>`;

(async () => {
  // 实际应用中，这里会是 axios.get(url) 的响应
  // const response = await axios.get(`...`);
  // const $ = cheerio.load(response.data);
  const $ = cheerio.load(sampleHtml); // 使用示例HTML

  // 方法一：使用直接子选择器 `>` 和通配符 `*`
  // `.chatbody > *` 意为：选择所有类名为 `chatbody` 的元素的直接子元素
  let allChildrenText = $('.chatbody > *').get().map(el => $(el).text().trim());
  console.log("方法一：所有直接子元素的文本内容:", allChildrenText);

  // 方法二：先选中父元素，再使用 .children() 方法
  // .children() 方法返回所有直接子元素
  let chatBodyChildren = $('.chatbody').children();
  let childrenDetails = [];
  chatBodyChildren.each((index, element) => {
    const sender = $(element).find('.sender').text().trim();
    const message = $(element).find('.message-text').text().trim();
    childrenDetails.push({ index, sender, message });
  });
  console.log("方法二：通过 .children() 遍历并提取详细信息:", childrenDetails);

  // 如果只需要某个特定类的直接子元素
  let messageContainers = $('.chatbody > .message-container');
  console.log("仅获取 .message-container 类的直接子元素数量:", messageContainers.length);

})();

代码解析与方法对比

1. *`$('.chatbody > ')`**:

   • .chatbody：这是一个类选择器，用于选中所有class属性中包含chatbody的元素。
   • >：这是直接子选择器，表示选择紧跟在其前面的选择器所匹配元素的直接子元素。
   • *：这是一个通配符选择器，表示匹配任何元素。
   • 组合起来，$('.chatbody > *') 意为：选择所有类名为chatbody的元素的所有直接子元素。
   • .get()：将Cheerio对象转换为一个DOM元素的数组。
   • .map(el => $(el).text())：对DOM元素数组进行遍历，将每个DOM元素重新包装成Cheerio对象$(el)，然后提取其内部的纯文本内容.text()。trim()用于去除文本两端的空白字符。

2. $('.chatbody').children():

   • $('.chatbody')：首先选中类名为chatbody的元素。
   • .children()：这是一个Cheerio方法，等同于CSS的直接子选择器>，它会返回当前选中元素的所有直接子元素。
   • .each((index, element) => { ... })：这是一个遍历方法，用于对Cheerio对象集合中的每个元素执行回调函数。index是元素在集合中的索引，element是当前的DOM元素（需要用$(element)再次包装成Cheerio对象才能使用Cheerio方法）。
   • $(element).find('.sender').text().trim()：在当前子元素内部，使用.find()方法查找具有sender类的后代元素，并提取其文本。.find()与.children()的区别在于，.find()会查找所有后代元素（包括子元素、孙子元素等），而.children()只查找直接子元素。

注意事项与最佳实践

• 选择器优先级与性能：
  • 尽可能使用最具体的选择器来减少匹配范围，提高性能。例如，如果知道元素是div，可以使用div.chatbody而不是仅仅.chatbody，但这通常不是性能瓶颈。
  • 避免使用过于宽泛的选择器，如*或div，除非您确实需要遍历所有此类元素。
• .children() vs .find()：
  • children()：只查找直接子元素。当您只需要下一层级的元素时使用。
  • find()：查找所有后代元素（包括子元素、孙子元素等）。当您需要在当前元素的任何深层子孙中查找特定元素时使用。
• 链式操作：Cheerio支持链式操作，这使得代码更简洁易读。例如，$('.chatbody').children('.message-container').find('.message-text').text()。
• 获取文本与HTML：
  • .text()：获取元素的纯文本内容，会去除所有HTML标签。
  • .html()：获取元素的内部HTML内容，包括其所有子元素的HTML标签。
• 处理结果集：
  • Cheerio方法返回的通常是一个Cheerio对象集合，它类似数组但不是原生数组。
  • 如果您需要原生JavaScript数组，可以使用.get()方法将其转换为DOM元素数组，然后可以使用map()、filter()等原生数组方法进行处理。
• 错误处理：当选择器未匹配到任何元素时，Cheerio对象将为空。在尝试访问其属性或调用方法（如.text()）之前，最好检查其.length属性是否大于0，以避免潜在的运行时错误。

总结

通过本教程，我们深入探讨了如何在Cheerio中高效利用CSS类选择器和子元素选择器来定位和提取HTML内容。掌握.className、>、*等CSS选择器以及children()、find()、text()、get()和map()等Cheerio方法，将使您能够编写出简洁、强大且易于维护的网页数据抓取和解析代码。在实际开发中，根据具体需求灵活选择最合适的选择器和方法，是提高效率的关键。