normalize() 方法能直接清理编辑器动态插入后残留的空文本节点，但必须作用于已挂载或已创建的 DOM 节点对象——对原始 HTML 字符串调用无效。
normalize() 方法能直接清理编辑器动态插入后残留的空文本节点，但必须作用于已挂载或已创建的 DOM 节点对象——对原始 HTML 字符串调用无效。
为什么 innerHTML 赋值后要立刻调用 normalize()
富文本编辑器（如 contenteditable 区域）在用户回车、粘贴、撤销等操作中，常生成大量相邻的 Text 节点，其中夹杂换行、缩进甚至纯空字符串。这些节点不显示内容，却占用 childNodes 长度、干扰遍历逻辑、影响 textContent 提取精度。
直接设置 element.innerHTML = htmlString 不会自动合并或删除它们；浏览器只是按 HTML 解析规则生成节点树，保留所有空白文本节点。此时必须手动触发结构优化：
-
element.normalize()会立即合并相邻Text节点，并移除nodeValue === ''的空节点 - 它不修改非文本节点（如
<div>、<br>），也不触发表单控件值或事件绑定 - 调用后
element.childNodes.length通常显著减少，element.textContent更贴近“人眼所见”结果
normalize() 和正则替换 innerHTML 的关键区别
有人试图用 html.replace(/<[^>]*>/g, '') 或类似正则清洗 HTML 字符串，但这和 normalize() 解决的是不同层面的问题：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 正则操作的是字符串，无法识别 DOM 结构语义（比如
<script>里的 HTML 片段也会被误删） -
normalize()操作的是真实节点，只处理Text类型子节点，安全、精准、无副作用 - 若你拿到的是字符串（如从编辑器
innerHTML取出的值），先得用template.innerHTML = str转成 DOM，再对template.content调用normalize()，最后读取template.innerHTML - 对
DocumentFragment或template.content调用normalize()是推荐做法，避免污染主文档
容易忽略的调用时机与边界情况
常见错误是“调用了但没生效”，往往因为节点还没挂载、或调用目标不对：
- 不要对未插入 DOM 的元素提前调用：
const el = document.createElement('div'); el.normalize();—— 此时没有子节点，什么也不会发生 - 不要对
Text节点本身调用：textNode.normalize()合法但无意义，该方法只在其父节点上起作用 -
normalize()不会跨过元素节点合并文本：如果两个Text节点被一个<span>隔开，它们不会被合并 - 它不处理注释节点（
Node.COMMENT_NODE），也不压缩文本内部空格——想把"a b"变成"a b"，得用normalize-space()（XPath）或 JS 的.replace(/\s+/g, ' ').trim()
真正干净的 DOM 清理，不是靠一层 normalize() 就万事大吉；它只解决“相邻文本碎片”问题，而编辑器产生的冗余还可能包括空 <div>、孤立 <br>、重复 class 等——那些得靠自定义遍历逻辑或专用清理函数来处理。
