在前端开发中，我们经常需要遍历 DOM 树并对其中的元素进行操作。这时候，一个方便而高效的工具是 npm 包 dom-iterator。本文将介绍如何使用 dom-iterator 进行 DOM 遍历，并提供示例代码。
安装
在终端中输入以下命令安装 dom-iterator：
npm install dom-iterator
使用方法
dom-iterator 有两个主要的类：DOMIterator 和 RangeIterator。前者用于遍历整个 DOM 树，后者用于遍历给定区域内的 DOM 树。
DOMIterator
首先，我们来看 DOMIterator 的使用方法。创建 DOMIterator 对象的方式如下：
const iterator = new DOMIterator(document.body);
这里，我们以 <body> 元素作为遍历的起点。你也可以用其他元素代替 document.body。
接着，我们需要定义一个回调函数，该函数将作用于每个被遍历到的元素。例如，我们想对每个 <p> 元素加粗：
function callback(element) {
if (element.tagName === 'P') {
element.style.fontWeight = 'bold';
}
}最后，我们调用 iterate() 方法开始遍历：
iterator.iterate(callback);
这将遍历整个 DOM 树，并对每个 <p> 元素加粗。
RangeIterator
除了遍历整个 DOM 树，我们还可以选择遍历给定区域内的 DOM 树。这时候就需要用到 RangeIterator。
通过以下代码创建 RangeIterator 对象：
const range = document.createRange();
range.selectNodeContents(document.getElementById('my-div'));
const iterator = new RangeIterator(range);这里，我们以 <div id="my-div"> 元素作为遍历的起点。你也可以用其他元素代替 document.getElementById('my-div')。
接着，定义回调函数，并调用 iterate() 方法：
function callback(element) {
if (element.tagName === 'P') {
element.style.fontWeight = 'bold';
}
}
iterator.iterate(callback);这将遍历 <div id="my-div"> 内部的 DOM 树，并对每个 <p> 元素加粗。
示例代码
下面是一个完整的示例代码，演示如何使用 DOMIterator 对整个 DOM 树进行遍历，并对每个 <p> 元素加粗：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- -------- ------------
-------
------
---------- -----------
------- -- - --------------
-----
------- -- ------- --------------
----
-------- ---- ------
-------- ---- ------
-----
------
------- -----------------------------------------------------------
--------
----- -------- - --- ---------------------------
-------- ----------------- -
-- ---------------- --- ---- -
------------------------ - -------
-
-
---------------------------
---------
-------
-------希望这篇文章对你学习和使用 dom-iterator 有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46288