前言
在前端开发中，经常需要对 HTML 文本进行解析成 DOM 节点，并对其进行增删改查等操作。常见的方式就是借助浏览器提供的 DOM API，但是这种方式有时过于繁琐，对于一些简单的操作来说，显得很笨重。
jesy 是一款轻量级的 HTML 解析工具，它可以将 HTML 文本解析成一个简单的树形结构，方便我们进行 DOM 操作。本文将从详细介绍 jesy 的使用方法以及一些技巧。
安装
使用 npm 进行安装：
npm install jesy
或者使用 yarn 进行安装：
yarn add jesy
解析 HTML 文本
使用 jesy, 可以很方便地将 HTML 文本解析成一个树形结构，下面是一个简单的例子：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - -
---- ------------------
-------------
----
-------------
-------------
-----
------
--
----- --- - -----------------
-----------------执行后会在控制台输出以下内容：
-- -------------------- ---- -------
-
-
----- ------
----- ------
------ - ------ ----------- --
--------- -
- ----- ------ ----- ---- --------- - - ----- ------- ----- -------- - - --
-
----- ------ ----- ----- --------- -
- ----- ------ ----- ----- --------- - - ----- ------- ----- ------ - - --
- ----- ------ ----- ----- --------- - - ----- ------- ----- ------ - - -
-
-
-
-
-从输出结果中可以看出，dom 是一个数组，其中每个元素都代表一个节点。节点可以是 tag(标签)、text(文本) 和 comment(注释)。
在解析 HTML 时，nodes 的属性如下：
type表示节点的类型name表示节点的名称attrs表示节点的属性，以对象的形式显示children表示节点的子元素
匹配节点
有了解析后的 HTML 树之后，我们就可以对其中的节点进行操作。第一个问题就是如何找到需要操作的节点。
使用 jesy 提供的 API，可以很方便地处理节点的查找：
find
可以使用 find 方法来查找满足指定条件的节点。例如：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - -
---- ------------------
-------------
----
-------------
-------------
-----
------
--
----- --- - -----------------
----- -- - ---------------- -- --------- --- ---- -- --------------------- --- --------
----------------上述代码中，通过 find 方法查找了列表中名称为 li 并且内容为 列表项2 的节点。
findAll
可以使用 findAll 来查找能够满足指定条件的所有节点。例如：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - -
---- ------------------
-------------
----
-------------
-------------
-----
------
--
----- --- - -----------------
----- --- - ------------------- -- --------- --- ------
-----------------上述代码中，通过 findAll 方法查找了所有名称为 li 的节点。
findParents
可以使用 findParents 方法来查找当前节点的所有祖先节点。例如：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - -
---- ------------------
-------------
----
-------------
-------------
-----
------
--
----- --- - -----------------
----- -- - ---------------- -- --------- --- ---- -- --------------------- --- --------
----- ------- - ------------------- -- --------- --- ------
---------------------上述代码中，通过 findParents 方法查找了列表项的父元素。
节点操作
jsey 提供了一些常用的节点操作 API，用于方便地修改节点信息。
updateTagName
可以使用 updateTagName 方法来修改节点名称。例如：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - -
---- ------------------
-------------
----
-------------
-------------
-----
------
--
----- --- - -----------------
----- -- - ---------------- -- --------- --- ---- -- --------------------- --- --------
-------------------------
--------------------------输出结果如下：
<span>列表项2</span>
setAttr、removeAttr、updateAttr
可以使用 setAttr、removeAttr、updateAttr 方法来更新，添加，删除属性。例如：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - -
---- ------------------
-------------
----
-------------
-------------
-----
------
--
----- --- - -----------------
----- -- - ---------------- -- --------- --- -------
---------------- -------
---------------------- -----------
--------------------
--------------------------输出结果如下：
<div class="wrapper">
<p>这是一段文本</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
</div>append、prepend、insert、remove
可以使用 append、prepend、insert、remove 这些方法来操作节点。例如：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - -
---- ------------------
-------------
----
-------------
-------------
-----
------
--
----- --- - -----------------
----- -- - ---------------- -- --------- --- ------
----- ------- - -------------------------------
-------------------
--------------------------输出结果如下：
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
总结
jsey 是一个非常方便的 HTML 解析工具库，它可以将 HTML 文本解析成一个简单的树形结构，方便我们进行 DOM 操作，提高了编码效率。
本文介绍了 jsey 的基本用法以及节点操作等功能，希望能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1f81e8991b448dacf0