【日常记录】【JS】createNodeIterator 遍历DOM节点

news2024/11/26 7:45:17

文章目录

- 1、介绍
- 2、createNodeIterator
- 3、nodeType
- 4、参考链接

1、介绍

createNodeIterator() 方法是 DOM API 中的一个方法，用于创建一个 NodeIterator 对象，可以用于遍历文档树中的一组 DOM 节点。就是可以把DOM 变成可遍历的

2、createNodeIterator

准备一个DOM结构

需求：遍历DOM，给每一层的元素增加一个自定义属性 data-index，如何操作？

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <main>
    <h2>你好，呆呆狗</h2>
    <div class="main">
      <div class="main_left">
        <span>左边</span>
      </div>
      <div class="main_right">
        <span>
          右边
        </span>
      </div>
    </div>
  </main>
</body>

</html>

    let mainEl = document.querySelector('main')
    const item = document.createNodeIterator(mainEl)//让mainEl变成可遍历的
    let root = item.nextNode() // 下一层

    while (root) {
      console.log(root, root.nodeType, root.nodeName.toLocaleLowerCase(), root.nodeValue);
      if (root.nodeType !== 3) {
        root.setAttribute('data-name', '呆呆狗')//给每个节点添加一个属性
        // 一般 nodeType 要么 1 要么3 
      }
      root = item.nextNode()
    }

在这里插入图片描述

3、nodeType

常量	值	节点类型	备注
Node.ELEMENT_NODE	1	Element	例如 span 标签、p 标签等
Node.ATTRIBUTE_NODE	2	Attr	代表属性
Node.TEXT_NODE	3	Text	代表元素或属性中的文本内容
Node.CDATA_SECTION_NODE	4	CDATASection	代表文档中的 CDATA 部（不会由解析器解析的文本）
Node.ENTITY_REFERENCE_NODE	5	EntityReference	代表实体引用
Node.ENTITY_NODE	6	Entity	代表实体
Node.PROCESSING_INSTRUCTION_NODE	7	ProcessingInstruction 代表处理指令
Node.COMMENT_NODE	8	Comment	代表注释
Node.DOCUMENT_NODE	9	Document	代表整个文档（DOM 树的根节点）
Node.DOCUMENT_TYPE_NODE	10	DocumentType	向为文档定义的实体提供接口
Node.DOCUMENT_FRAGMENT_NODE	11	DocumentFragment	代表轻量级的 Document 对象（文档的某个部分）
Node.NOTATION_NODE	12	Notation	代表 DTD 中声明的符号