概述
在前端的开发中，我们经常需要处理很多 HTML 页面信息，例如：从页面中抽取出相关信息，把页面转换成标准的 DOM 模型等等。而 cherio 就是一个能够处理 HTML 文档的轻量级库。它采用了快速、灵活和与 jQuery 兼容的方式，使用户能够使用类似于 jQuery 的语法遍历和操作 HTML/XML 文档。
安装
你可以使用 npm 来安装 cherio，也可以手动下载源文件到本地。在本文中我们以 npm 安装为例。
npm install cherio
使用
引入 cherio
在使用 cherio 之前，我们需要先引入它。这里提供两种引入的方式：
- CommonJS
const cherio = require('cherio');- ES6
import cherio from 'cherio';
加载 HTML
我们需要把 HTML 转换成 cherio 可识别的 DOM 对象，进行后续的操作。cherio 提供了 load 方法，它能够识别多种不同类型的 HTML 文档。例如，可以从网络上加载一个 HTML 文件：
const cheerio = require('cherio');
const axios = require('axios');
axios.get('https://www.example.com').then(function(response) {
const html = response.data;
const $ = cheerio.load(html);
});当然，也可以从文件中加载，例如：
const cheerio = require('cherio');
const fs = require('fs');
const html = fs.readFileSync('index.html');
const $ = cheerio.load(html);基本使用
一旦我们有了 cherio 对象，我们就可以像 jQuery 一样使用 DOM 遍历和操作的方法了。例如获取 h1 标签元素的文本内容:
const cheerio = require('cherio');
const fs = require('fs');
const html = fs.readFileSync('index.html');
const $ = cheerio.load(html);
console.log($('h1').text());筛选
可以使用 cherio 的选择器语言来使用特定的 DOM 元素。例如，选择所有的 p 元素和 h2 元素：
console.log($('p,h2').text());还可以通过类选择器来筛选元素：
console.log($('.highlight').text());遍历
遍历 DOM 的元素时，我们可以使用 cherio 支持的 each 方法，它类似于 jQuery 的 each() 方法。例如，循环输出所有的链接：
$('a').each(function() {
console.log($(this).text());
});操作 DOM
与 jQuery 一样，cherio 也支持多种对 DOM 的操作。例如，添加、删除元素，修改元素的属性、内容等等。以下为一些例子：
添加元素：
$('p').append('<strong>Hello!</strong>');
console.log($('p').html());删除元素：
$('a').remove();
console.log($('a').length);修改元素属性：
console.log($('img').attr('src'));
$('img').attr('src', 'https://www.example.com/test.jpg');
console.log($('img').attr('src'));修改元素内容：
console.log($('p').html());
$('p').html('This is a new paragraph.');
console.log($('p').html());总结
本篇文章主要介绍了 cherio 包的使用方法。它是一个功能强大的轻量级 HTML 文档处理库，可以用于从 HTML 页面中提取内容、操作 DOM 等等。通过学习本文示例，你可以掌握 cherio 的基本用法，并可以根据实际需求更深入地了解此库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cca81e8991b448e652d