什么是 html-to-array？
html-to-array 是一个可以将 HTML 代码解析成有序数组的 npm 包，它可以使得前端开发人员更方便地对 HTML 代码进行操作。这个包可以将 HTML 代码转化为一个有序的数组，每个数组元素都对应一个 HTML 标签。通过这个数组，我们可以更方便地获取、修改、删除 HTML 标签以及它们的属性和文本内容。
html-to-array 的安装
在使用 html-to-array 之前，我们需要通过 npm 先将其安装到项目中：
npm install html-to-array --save-dev
html-to-array 的使用示例
接下来我们将演示如何使用 html-to-array 这个 npm 包。
例子 1：获取 HTML 格式的页面内容
我们先将一个 HTML 页面的内容存储到一个变量中，然后通过 html-to-array 将其转化为数组：
-- -------------------- ---- -------
----- ----------- - -------------------------
----- ---- - -------
------
-------------------- --------------
-------
------
-------- -- - ------------
------- -- - -------------
-------
---------
----- ----- - ------------------
-------------------输出结果：
-- -------------------- ---- -------
-
- -------- -------
------ ---
---------
- - -------- -------
------ ---
---------
- - -------- -------- ------ --- --------- ------- - - --
- -------- -------
------ ---
---------
- - -------- ----- ------ --- --------- ------- --
- -------- ---- ------ --- --------- ------- - - - - -
-这里我们输出了 html-to-array 生成的数组，数组的每个元素都是一个表示 HTML 标签的对象，对象中有 tagName、attrs 和 children 三个属性。其中 tagName 表示标签名称，attrs 表示标签的属性，children 表示标签的子元素。在以上例子中，通过此方法我们获取了 HTML 页面的全部内容。
例子 2：修改 HTML 页面中的内容
现在，我们将在已生成的数组中修改一个标签的内容。我们用同样的步骤生成一个数组并且修改。
-- -------------------- ---- -------
----- ----------- - -------------------------
----- ---- - -------
------
-------------------- --------------
-------
------
-------- -- - ------------
------- -- - -------------
-------
---------
----- ----- - ------------------
-------------------------------------------- - --------- ------
----- ------------ - ------------------- ---- -- -
----- ----- - ----------------------
------------- -- ---------------------------------------
------- ---
----- ------- - ----------------------- - - - - --------------
----- -------- - --------------------
----- ---------- - ---------------------------
- ------------------- --- - -- ------ --------------- --- --------
- ---------------
- -------------------------- ---- -- ---- - ------------------ ---
- ---
------ ---- - ------- - ---------- - ---------
-- ----
--------------------------这里，我们通过修改数组对象的属性，对第二个 p 标签的文本进行了修改。接着，我们使用一个 reduce 函数遍历数组的每个元素，并且将修改后的内容输出成 HTML。最后，输出了修改之后的 HTML 页面。
总结
在本文中，我们详细介绍了 npm 包 html-to-array 的使用方法。html-to-array 可以将 HTML 代码解析成有序数组，并且把每个标签及其子元素转化为一个数组元素，从而方便前端开发人员对 HTML 代码进行操作。我们通过两个示例演示了如何使用 html-to-array 获取 HTML 内容和修改 HTML 内容。希望这篇文章对大家有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5951ab1864dac66e61