NodeIterator.nextNode()每次调用返回文档顺序中下一个符合条件的节点，首次即返回根节点（若满足过滤条件），遍历至末尾返回null。
NodeIterator.nextNode() 的基本行为是什么
nextNode() 每次调用返回文档顺序（document order）中的下一个符合条件的节点，从创建时指定的根节点开始深度优先遍历。它不跳过文本节点、注释或元素，除非你显式用 whatToShow 和 filter 过滤。
注意：它返回的是「第一个匹配节点」，不是「当前节点」；首次调用就返回根节点（如果根节点本身满足过滤条件），后续才逐步推进。
常见错误现象：
- 调用一次就停止，误以为需要先 currentNode 初始化
- 忘记 whatToShow 默认只显示元素节点（NodeFilter.SHOW_ELEMENT），导致看不见文本节点
- 在循环中重复创建 NodeIterator，每次调用都从头开始
实操建议：
- 创建时把 whatToShow 设为 NodeFilter.SHOW_ALL 才能看到所有节点类型
- 用 while ((node = iterator.nextNode()) !== null) 循环，别用 for 配固定长度
- 不要依赖 iterator.root 或 iterator.referenceNode 来判断位置，它们不随迭代更新
如何让 nextNode() 包含文本节点和注释节点
默认 NodeIterator 实例会忽略文本节点和注释，因为 whatToShow 默认值是 NodeFilter.SHOW_ELEMENT。
正确做法是显式传入组合掩码：
- NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT | NodeFilter.SHOW_COMMENT
- 或直接用 NodeFilter.SHOW_ALL（值为 0xFFFFFFFF）
示例：
const root = document.body;
const iter = document.createNodeIterator(
root,
NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT | NodeFilter.SHOW_COMMENT,
null, // filter 可为 null
false // expandEntityReferences（已废弃，始终 false）
);
let node;
while ((node = iter.nextNode()) !== null) {
console.log(node.nodeType, node.nodeName, node.nodeValue?.trim()?.substring(0, 20));
}
容易踩的坑：
- NodeFilter.SHOW_ALL 在部分旧版 Safari 中有兼容性问题，稳妥起见手动组合更可靠
- 空白文本节点（如换行缩进）也会被返回，nodeValue 可能是 "\n "，需自行 trim() 判断
- 注释节点的 nodeValue 包含 <!-- 和 --> 外的内容，不含符号本身
为什么 nextNode() 有时返回 null 就停了，但 DOM 明明还有节点
根本原因只有两个：迭代器已到末尾，或节点被过滤掉了。
立即学习“前端免费学习笔记（深入）”；
排查路径：
- 检查 iter.root 是否是你以为的容器（比如传了 document 却期望只遍历某个 div）
- 查看 whatToShow 是否排除了目标节点类型（例如想遍历文本却没加 SHOW_TEXT）
- 如果用了自定义 filter 函数，确认它对目标节点返回了 NodeFilter.FILTER_ACCEPT，而不是 REJECT 或 SKIP
- 注意：DOM 动态修改（如在迭代中删节点）会导致 nextNode() 行为不可预测，某些浏览器可能跳过、重复或抛错
性能提示：
- nextNode() 是即时计算，不缓存结果，反复调用开销小，但频繁切换上下文（如在循环里嵌套操作 DOM）会影响实际性能
- 它比 TreeWalker 更轻量，但不支持反向遍历（没有 previousNode() 对应物）
与 TreeWalker.nextNode() 的关键区别在哪
TreeWalker 的 nextNode() 行为看似一样，但底层逻辑不同：它维护一个内部「当前位置」，且支持 parentNode()、firstChild() 等导航方法；而 NodeIterator 是纯前向流式迭代器，无回溯能力。
选型建议：
- 只需单向遍历 → 用 NodeIterator，语义清晰，API 简洁
- 需要在遍历中临时跳转（比如发现某元素就进去查子节点，再回来继续）→ 必须用 TreeWalker
- 注意：TreeWalker 的 nextNode() 在到达末尾后也返回 null，但它允许你之后调用 parentNode() 继续，NodeIterator 不行
最容易被忽略的一点：
NodeIterator 不响应 DOM 变更 —— 如果你在迭代中途插入新节点，这些节点**不会**被后续的 nextNode() 捕获；而 TreeWalker 同样不保证捕获，但它的「当前位置」概念让它在某些场景下更容易手动校正。真要处理动态 DOM，得自己缓存节点列表或改用 MutationObserver 配合快照。
