nodeiterator能精准定位注释节点因其支持按nodetype=8过滤，跳过无关节点；创建时需设whattoshow为nodefilter.show_comment，并用acceptnode筛选内容，注意ie不兼容及innerhtml会丢失注释。
NodeIterator 为什么能精准定位注释节点
因为 NodeIterator 支持按节点类型过滤，而注释节点的 nodeType 恒为 8，比遍历所有子节点再判断类型快得多。在富文本编辑器中，常把元信息（如光标锚点、组件占位符）藏在 HTML 注释里，比如 <!-- widget:chart id="abc123" -->，用 NodeIterator 可跳过元素、文本等无关节点，直奔目标。
创建只遍历注释节点的 NodeIterator 实例
关键在 whatToShow 参数必须设为 NodeFilter.SHOW_COMMENT，否则默认不包含注释节点；同时建议设置 expandEntityReferences: false 避免 XML 实体展开干扰匹配：
const iter = document.createNodeIterator(
rootElement,
NodeFilter.SHOW_COMMENT,
{
acceptNode(node) {
// 可选：进一步按内容筛选，比如只取含 "widget:" 的注释
return node.nodeValue.includes('widget:')
? NodeFilter.FILTER_ACCEPT
: NodeFilter.FILTER_REJECT;
}
},
false
);
- 如果
rootElement是contenteditable区域的容器（如<div id="editor">），迭代范围就限定在其内部<li>不要用 <code>document.body作根节点——编辑器可能嵌在复杂页面中，会拉进无关注释 -
acceptNode回调里别直接修改 DOM，否则可能触发迭代器状态错乱
逐个获取注释节点并提取结构化数据
注释内容是纯字符串，需手动解析。常见模式是 <!-- key="value" key2="value2" -->，可用正则安全提取，避免依赖外部库：
let node;
while ((node = iter.nextNode()) !== null) {
const match = node.nodeValue.match(/<!--\s*(\w+):\s*(\w+)\s+id="([^"]+)"\s*-->/);
if (match) {
console.log('类型:', match[1], 'ID:', match[3]);
// → 类型: widget ID: abc123
}
}
- 正则末尾加
\s*-->确保匹配闭合，防止误捕<!-- widget:id="x" --> extra这类脏数据 - 若注释格式不统一（比如有换行或多余空格），改用
node.nodeValue.trim().startsWith('widget:')做前置判断更稳 - 注意
nextNode()返回null表示结束，不是undefined，判空别写错
性能和兼容性要注意的硬伤
NodeIterator 在 IE 中完全不可用，Edge 17+ 才支持；且每次调用 nextNode() 都是实时遍历，若编辑器频繁 DOM 变动（如输入时自动保存），需重新创建迭代器实例，不能复用旧对象：
- 现代编辑器应优先用
document.querySelectorAll('body > *') + Array.from(...).filter(n => n.nodeType === 8)作降级方案 - Chrome/Firefox/Safari 中，
NodeIterator比TreeWalker更轻量，但无法反向遍历——需要从后往前找就得自己缓存结果数组 - 注释节点被
innerHTML赋值时会丢失，所以编辑器若用el.innerHTML = newHtml更新内容，之前插入的注释全没了
真正难的不是找到注释，而是确保它在编辑过程中始终存在、格式不被破坏——这得靠编辑器底层对注释节点的保护策略，NodeIterator 只是个检索工具。
