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 中声明的符号 |