在前端开发中，我们经常需要解析 HTML 文档来获取页面信息，这时候就需要使用 HTML 解析器。npm 上有众多的 HTML 解析器，其中 @thenja/html-parser 是一款不错的选择，它可以快速地解析 HTML，支持类 jQuery 的选择器语法，本文将详细介绍如何使用该包。
安装
在使用 @thenja/html-parser 之前，需要先安装它。可以通过以下命令在项目中安装：
npm install @thenja/html-parser
基本用法
安装完成后，可以通过以下代码导入包：
const { parse } = require('@thenja/html-parser');然后可以使用 parse 函数来解析 HTML：
-- -------------------- ---- -------
----- ---- - -
------
------
--------- -----------
-------
-------
--
----- -------- - ------------
---------------------------------输出结果：
<!DOCTYPE html><html><body><h1>Hello World!</h1></body></html>
parse 函数将 HTML 解析成一个树形结构，即 DOM 树。根据 HTML 文档的层次结构，每个节点都有一个父节点和零个或多个子节点。
rootNode 是一个树形结构的根，它有许多方法可以用来查询和操作节点，下面将详细介绍一些常用的方法。
查询节点
使用 @thenja/html-parser 可以快速地查询节点，它支持类 jQuery 的选择器语法。以下是一些简单的例子：
-- -------------------- ---- -------
----- ---- - -
------
------
--------- -----------
----
------------
------------
--------------
-----
-------
-------
--
----- -------- - ------------
-- -----
----------------------------------------------------- -- --------- -----------
---------------------------------------------------- -- ------------------ -- -------------- ------------- ---------------使用 querySelector 和 querySelectorAll 方法可以查询节点，并返回一个节点对象或节点对象数组。可以通过 toString 方法将节点对象转换成 HTML 字符串。
操作节点
除了查询节点，@thenja/html-parser 还提供了许多方法可以操作节点。以下是一些常用的方法：
添加节点
-- -------------------- ---- -------
----- ---- - -
------
------
--------- -----------
-------
-------
--
----- -------- - ------------
----- ------- - ------------------------------
----------------- - ----- -- - ------
-----------------------------------
---------------------------------输出结果：
<!DOCTYPE html><html><body><h1>Hello World!</h1><div>This is a div.</div></body></html>
使用 createElement 方法可以创建一个新的节点对象。可以通过 appendChild 方法将新节点添加到任意节点下面。
修改节点
-- -------------------- ---- -------
----- ---- - -
------
------
--------- -----------
-------
-------
--
----- -------- - ------------
----- ------ - -----------------------------
---------------- - ------ -----------------
---------------------------------输出结果：
<!DOCTYPE html><html><body><h1>Hello <em>World</em>!</h1></body></html>
可以通过 innerHTML 属性修改节点的内容。
删除节点
-- -------------------- ---- -------
----- ---- - -
------
------
--------- -----------
------- -- - --------------
-------
-------
--
----- -------- - ------------
----- ----- - ----------------------------
---------------
---------------------------------
输出结果：
<!DOCTYPE html><html><body><h1>Hello World!</h1></body></html>
使用 remove 方法可以删除一个节点。
指导意义
@thenja/html-parser 是一个强大的 HTML 解析器，可以用于快速地解析 HTML 文档，并且支持类 jQuery 的选择器语法，可以方便地查询和操作节点。通过本文的介绍，希望读者可以掌握使用该包的基本技巧，并且能够在实际开发中灵活运用，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b46c6eb7e50355dbed7