当前位置：首页 > 文章列表 > 文章 > 前端 > Cheerio选择器使用详解与技巧

Cheerio选择器使用详解与技巧

2025-09-20 10:57:58 0浏览收藏

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《Cheerio Class 选择器使用全攻略》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

使用 Cheerio 进行 Class 选择器操作详解

本文旨在帮助开发者理解和掌握如何使用 Cheerio 库进行 Class 选择器操作，从网页中提取特定元素及其子元素的内容。我们将通过示例代码，详细介绍如何利用 Cheerio 选择器获取目标元素，并遍历其子元素，最终提取所需文本信息。

Cheerio 是一个快速、灵活、简洁的 Node.js 库，它为服务器特别定制了核心 jQuery 的子集。它能够解析 HTML 结构，并提供类似于 jQuery 的 API 来选择和操作 DOM 元素。在爬虫、数据抓取等场景中，Cheerio 是一个非常实用的工具。

安装与引入

首先，确保你的项目中已经安装了 Cheerio 和 Axios。Axios 用于发起 HTTP 请求获取网页内容，Cheerio 用于解析 HTML 内容。

npm install axios cheerio

然后在你的 JavaScript 文件中引入这两个库：

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

获取 HTML 内容并加载到 Cheerio

使用 Axios 发起 GET 请求，获取目标网页的 HTML 内容，然后使用 Cheerio 加载 HTML。

async function fetchData(url) {
  try {
    const response = await axios.get(url);
    return response.data;
  } catch (error) {
    console.error('Error fetching data:', error);
    return null;
  }
}

async function main() {
  const url = 'YOUR_TARGET_URL'; // 替换为你的目标网址
  const html = await fetchData(url);

  if (html) {
    const $ = cheerio.load(html);
    // 后续的 Cheerio 操作在这里进行
  } else {
    console.log('Failed to fetch HTML content.');
  }
}

main();

将 YOUR_TARGET_URL 替换为你要抓取的网页地址。

使用 Class 选择器获取目标元素

假设我们要获取 class 为 chatbody 的 div 元素，并且这个元素还具有 overflow-y-auto 和 flex-column 这两个 class。可以使用如下选择器：

let chatBody = $('div.chatbody.overflow-y-auto.flex-column');

注意，在 Cheerio 中，可以使用.连接多个 class，表示同时具有这些 class 的元素。

获取目标元素的子元素并提取文本

要获取 chatBody 的所有直接子元素并提取它们的文本内容，可以使用 > 选择器和 .text() 方法。

let chatBodyChildren = chatBody.children();

chatBodyChildren.each((index, element) => {
  console.log(`Child ${index + 1}:`, $(element).text().trim()); // 使用 trim() 去除文本首尾的空格
});

或者，可以使用 > 选择器直接选择子元素：

$('.chatbody.overflow-y-auto.flex-column > *').each((index, element) => {
  console.log(`Child ${index + 1}:`, $(element).text().trim());
});

> 选择器表示直接子元素，* 表示所有元素。.text() 方法用于提取元素的文本内容。.trim() 方法用于去除文本首尾的空格，使输出更干净。

完整示例代码

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

async function fetchData(url) {
  try {
    const response = await axios.get(url);
    return response.data;
  } catch (error) {
    console.error('Error fetching data:', error);
    return null;
  }
}

async function main() {
  const url = 'YOUR_TARGET_URL'; // 替换为你的目标网址
  const html = await fetchData(url);

  if (html) {
    const $ = cheerio.load(html);

    let chatBody = $('div.chatbody.overflow-y-auto.flex-column');

    chatBody.children().each((index, element) => {
      console.log(`Child ${index + 1}:`, $(element).text().trim());
    });

    // 或者使用以下方法：
    // $('.chatbody.overflow-y-auto.flex-column > *').each((index, element) => {
    //   console.log(`Child ${index + 1}:`, $(element).text().trim());
    // });

  } else {
    console.log('Failed to fetch HTML content.');
  }
}

main();