Document.createNodeIterator 教程
最后修改于 2023 年 8 月 24 日
Document.createNodeIterator 教程演示了如何使用 JavaScript 中的 Document.createNodeIterator 方法创建节点迭代器，并遍历文档中的节点。
Document.createNodeIterator
Document.createNodeIterator() 创建一个 NodeInterator。NodeIterator 用于遍历文档中的节点。
该函数具有以下概要
let nodeIterator = document.createNodeIterator(root, whatToShow, filter);
root 是创建迭代器的节点。whatToShow 是一个位掩码，例如 NodeFilter.SHOW_COMMENT 或 NodeFilter.SHOW_ELEMENT，它决定了 NodeIterator 应返回的节点类型。
filter 是一个可选参数；它是一个回调函数，为 NodeIterator 和 TreeWalker 提供自定义过滤。filter 函数接受一个节点作为其唯一参数，并指示该节点是否被接受、拒绝或跳过。
Document.createNodeIterator 示例
以下示例演示了文档的 createNodeIterator 函数的用法。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document.createNodeIterator</title>
</head>
<body>
<h1>Iterating DOM in JavaScript</h1>
<p>
A paragraph.
</p>
<div>
A generic container with an
<em>inline</em> element.
</div>
<ul>
<li>powerful</li>
<li>solid</li>
<li>grounded</li>
</ul>
<script src="main.js">
</script>
</body>
</html>
在示例中，我们遍历文档 body 标签的元素，并将它们的名称打印到控制台。
main.js
window.onload = function () {
getChildren(document.body);
}
function getChildren(mytag) {
const nodeIter = document.createNodeIterator(
mytag,
NodeFilter.SHOW_ELEMENT,
(node) => {
return NodeFilter.FILTER_ACCEPT;
}
);
let cnode;
while (cnode = nodeIter.nextNode()) {
console.log(cnode.tagName.toLowerCase());
}
}
JavaScript 代码创建了一个节点迭代器，并遍历 body 标签的元素。
window.onload = function () {
getChildren(document.body);
}
当文档完全加载后，我们调用 getChildren 函数，并将文档的 body 标签传递给它。
const nodeIter = document.createNodeIterator(
mytag,
NodeFilter.SHOW_ELEMENT,
(node) => {
return NodeFilter.FILTER_ACCEPT;
}
);
使用 document.createNodeIterator 创建了一个节点迭代器。使用 NodeFilter.SHOW_ELEMENT，我们告诉迭代器返回元素。
while (cnode = nodeIter.nextNode()) {
console.log(cnode.tagName.toLowerCase());
}
我们在 while 循环中使用迭代器的 nextNode 方法遍历元素。我们输出元素的标签名。
在本文中，我们使用节点迭代器遍历了 body 标签的元素。