HTML DOM TreeWalker nextNode() 方法(1)

📌 相关文章

📜 HTML DOM TreeWalker nextNode() 方法(1)

📅 最后修改于: 2023-12-03 15:01:10.308000 🧑 作者: Mango

HTML DOM TreeWalker nextNode() 方法

HTML DOM TreeWalker nextNode() 方法用于向下遍历文档树的下一个节点，并返回节点对象。

语法

treeWalker.nextNode()

返回值

方法返回节点对象。如果没有下一个节点，则返回null。

示例

假设有一个HTML文档，其中包含以下标记

<html>
  <head>
    <title>Test DOM TreeWalker nextNode()方法</title>
  </head>
  <body>
    <h1>标题1</h1>
    <div id="myDiv1">
      <p>段落1</p>
      <p>段落2</p>
    </div>
    <h2>标题2</h2>
    <div id="myDiv2">
      <p>段落3</p>
      <div id="myDiv3">
        <p>段落4</p>
        <ul>
          <li>列表项1</li>
          <li>列表项2</li>
        </ul>
      </div>
    </div>
    <h3>标题3</h3>
    <p>段落5</p>
  </body>
</html>

使用TreeWalker对象进行遍历：

var walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  null,
  false
);

var node = walker.currentNode;

while(node !== null) {
  console.log(node.nodeName);

  node = walker.nextNode();
}

运行以上代码，控制台将依次输出：

HTML
HEAD
TITLE
BODY
H1
DIV
P
P
H2
DIV
P
DIV
P
UL
LI
LI
H3
P

参数

HTML DOM TreeWalker对象创建时传入了四个参数：

root：遍历的根节点。
whatToShow：决定遍历哪些节点。
filter：定义遍历中使用的自定义筛选函数。
entityReferenceExpansion：决定是否展开实体。

其中，whatToShow参数使用常量NodeFilter.SHOW_ELEMENT表示只遍历元素节点，不遍历文本和注释节点。

注意事项

使用TreeWalker对象需要注意以下事项：

遍历过程中会跳过隐藏的元素节点。
如果节点被删除，更新或重新插入到文档中，遍历过程可能受到影响，需要重新获取TreeWalker对象进行遍历。
节点的子节点、兄弟节点等属性可能会随着遍历过程发生变化，需要注意处理。