js逆向补环境之cheerio库（一）

时光亦不回首

已于 2024-11-07 10:37:28 修改

阅读量663

点赞数 3

分类专栏： # js逆向补环境文章标签： js逆向补环境 cheerio 1024程序员节

于 2024-10-24 11:35:32 首次发布

本文链接：https://blog.csdn.net/qq_43308242/article/details/143201586

版权

js逆向补环境专栏收录该内容

1 篇文章

订阅专栏

前言：在补环境中我们经常会遇到DOM节点的操作，但是自己实现起来感觉非常的麻烦，而且还不一定能够做的很好，有人可能会说使用jsdom，虽然它可以模拟一个完整的浏览器环境，使得在 Node.js 中进行 DOM 操作变得非常方便，但是也正是由于jsdom的完整性及兼容所以导致了其性能问题，今天介绍这个这个库虽然不像jsdom一样提供类似于浏览器的完整环境，但是它能够在一定程度上实现一些dom操作，且具备更高效的性能，下面先来简单的了解下这个库。

简介

Cheerio是一个快速、灵活且简洁的HTML解析和操作工具，专为服务器端的HTML数据处理任务而设计。它提供了类似jQuery的 API，使得前端开发者可以迅速上手并在Node.js环境中高效地操作 HTML。Cheerio 广泛应用于 Web 爬虫、数据提取和静态页面处理等场景。

安装

npm install cheerio

基本用法

1. 加载 HTML

首先，使用cheerio.load方法将HTML字符串加载到Cheerio中：

const cheerio = require('cheerio');

const html = `
<html>
  <body>
    <div class="content">
      <h1>Hello, World!</h1>
    </div>
  </body>
</html>
`;
const $ = cheerio.load(html);

之后我们来打印一下html的内容，如下：

console.log($.html())

在这里插入图片描述
可以看到html里面的内容就被输出出来了

2. 选择元素

Cheerio提供了类似 jQuery 的选择器，可以方便地选择元素：

const heading = $('.content h1').text(); // 选择 h1 元素
console.log(heading); // 输出: "Hello, World!"

3. 修改元素

可以使用Cheerio修改元素的文本内容、属性等：

$('h1').text('Hello, Cheerio!');
$('h1').attr('id', 'main-heading');

在这里插入图片描述

4. 删除元素

可以从DOM中删除元素：

$('h1').remove();

在这里插入图片描述

5. 添加元素

可以在DOM中添加新元素：

$('.content').append('<p>New paragraph</p>');

在这里插入图片描述

6. 遍历元素

可以遍历选中的元素集合：

$('div').each((index, element) => {
  console.log($(element).text());
});

在这里插入图片描述

7. 获取和设置属性

可以获取和设置HTML元素的属性：

const id = $('h1').attr('id'); // 获取属性
$('h1').attr('id', 'new-id');  // 设置属性

在这里插入图片描述

8.根据id获取标签内容

const h1 = $('#new-id')

在这里插入图片描述

这篇关于cheerio的介绍就讲到这里了，还有很多操作，大家可以去查阅一下中文文档：Cheerio中文文档，后面会讲一下如何使用cheerio这个库实现一些dom操作。

欢迎加入星球：《时光漫漫》一起共同学习进步

欢迎关注公众号：【时光python之旅】 (在这里你能学到我的所见、所闻、所思、所学)