normalize() 方法递归合并相邻文本节点并删除空文本节点，仅作用于 Text 节点（nodeType === 3），不改变元素结构、不触发重排重绘，也不处理空白压缩或首尾 trim。

normalize() 是 DOM Node 接口的原生方法，作用是**递归地合并相邻的 Text 节点，并移除空的 Text 节点（即只含空白或完全为空的文本节点）**。它不改变 HTML 结构，也不影响元素节点、注释节点等，只作用于文本节点（nodeType === 3）及其相邻关系。

它具体做什么

当一个元素内存在多个连续的文本节点时（比如动态插入多次 createTextNode），DOM 树中会形成类似这样的结构：

→ <p>[Text: "Hello"] [Text: " "] [Text: "World"]</p>

调用 element.normalize() 后，会变成：

→ <p>[Text: "Hello World"]</p>

同时，如果某个文本节点内容是纯空白（如 "\n \t " 或 ""），它会被直接删除，前提是它不包含任何可见字符（/\S/.test(node.textContent) 为 false）。

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

立即学习“Java免费学习笔记（深入）”；

使用方式很简单

只需在目标元素节点上调用即可：

• document.getElementById('myDiv').normalize();
• someElement.normalize();（适用于任意元素节点）
• 它会自动递归处理该元素及其所有后代中的文本节点

注意几个关键点

它不是“智能清洗”——不会压缩内部多余空格，也不会 trim 首尾空白，只做两件事：

• 把紧挨着的多个 Text 节点合并成一个（按顺序拼接 nodeValue）
• 删掉内容为空或全空白的 Text 节点（例如由换行缩进产生的空文本节点）
• 对非文本节点（如 <span>、<img>）无影响
• 不触发重排重绘，纯 DOM 树结构调整

和手动清理的区别

如果你需要进一步规范文本内容（比如把连续空白转为单空格、去除首尾空格），normalize() 不够用，得配合遍历 + textContent.trim().replace(/\s+/g, ' ') 手动处理。而 normalize() 是更底层、更轻量的 DOM 树整理操作，适合在插入多个文本片段后快速“收拢”节点结构，避免 childNodes.length 异常偏大或遍历时误读空节点。