概述
在前端的开发中，我们经常需要处理很多 HTML 页面信息，例如：从页面中抽取出相关信息，把页面转换成标准的 DOM 模型等等。而 cherio 就是一个能够处理 HTML 文档的轻量级库。它采用了快速、灵活和与 jQuery 兼容的方式，使用户能够使用类似于 jQuery 的语法遍历和操作 HTML/XML 文档。
安装
你可以使用 npm 来安装 cherio，也可以手动下载源文件到本地。在本文中我们以 npm 安装为例。
--- ------- ------
使用
引入 cherio
在使用 cherio 之前，我们需要先引入它。这里提供两种引入的方式：
- CommonJS
----- ------ - ------------------
- ES6
------ ------ ---- ---------
加载 HTML
我们需要把 HTML 转换成 cherio 可识别的 DOM 对象，进行后续的操作。cherio 提供了 load 方法，它能够识别多种不同类型的 HTML 文档。例如，可以从网络上加载一个 HTML 文件：
----- ------- - ------------------ ----- ----- - ----------------- ------------------------------------------------------------ - ----- ---- - -------------- ----- - - ------------------- ---
当然，也可以从文件中加载，例如：
----- ------- - ------------------ ----- -- - -------------- ----- ---- - ------------------------------ ----- - - -------------------
基本使用
一旦我们有了 cherio 对象，我们就可以像 jQuery 一样使用 DOM 遍历和操作的方法了。例如获取 h1 标签元素的文本内容:
----- ------- - ------------------ ----- -- - -------------- ----- ---- - ------------------------------ ----- - - ------------------- ----------------------------
筛选
可以使用 cherio 的选择器语言来使用特定的 DOM 元素。例如，选择所有的 p 元素和 h2 元素：
------------------------------
还可以通过类选择器来筛选元素：
------------------------------------
遍历
遍历 DOM 的元素时，我们可以使用 cherio 支持的 each 方法，它类似于 jQuery 的 each() 方法。例如，循环输出所有的链接：
---------------------- - ---------------------------- ---
操作 DOM
与 jQuery 一样，cherio 也支持多种对 DOM 的操作。例如，添加、删除元素，修改元素的属性、内容等等。以下为一些例子：
添加元素：
----------------------------------------- ---------------------------
删除元素：
---------------- ---------------------------
修改元素属性：
---------------------------------- -------------------- ------------------------------------ ----------------------------------
修改元素内容：
--------------------------- ----------------- -- - --- ------------- ---------------------------
总结
本篇文章主要介绍了 cherio 包的使用方法。它是一个功能强大的轻量级 HTML 文档处理库，可以用于从 HTML 页面中提取内容、操作 DOM 等等。通过学习本文示例，你可以掌握 cherio 的基本用法，并可以根据实际需求更深入地了解此库。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056cca81e8991b448e652d