normalize() 方法自动合并相邻文本节点并删除空文本节点以优化 dom 结构；作用于调用节点及其后代中的 text 节点，包括连续文本、含空白字符的文本和空字符串文本节点。

normalize() 方法能自动把相邻的文本节点合并成一个，同时删掉空的文本节点，让 DOM 结构更干净、逻辑更清晰。它不改变内容，只优化结构，适合在动态插入、替换或解析 HTML 后调用。

哪些节点会被处理？

该方法作用于调用它的节点及其所有后代节点中的 Text 类型子节点，具体包括：

• 连续出现的多个文本节点（如 div 下直接追加了两次 createTextNode()）
• 中间夹着空格、换行或纯空白字符的文本节点（浏览器解析 HTML 时常会生成这类“隐形”节点）
• 内容为空字符串的文本节点（document.createTextNode('')）

怎么调用才有效？

normalize() 是 DOM 节点的方法，可作用于 Element、Document 或 Text 节点本身（尽管对 Text 调用意义不大）。常用方式有：

• element.normalize() —— 整理该元素内部所有文本碎片
• document.normalize() —— 全局清理整个文档（较少用，开销略大）
• 通常在插入/修改节点后立即调用，比如：parent.appendChild(newNode); parent.normalize();

实际效果示例

假设你这样构建一个 div：

let div = document.createElement('div');
div.appendChild(document.createTextNode('Hello'));
div.appendChild(document.createTextNode(' '));
div.appendChild(document.createTextNode('world!'));
console.log(div.childNodes.length); // 输出 3

调用 div.normalize() 后：

• 三个文本节点被合并为一个
• div.childNodes.length 变为 1
• 该文本节点的 nodeValue 变成 "Hello world!"
• 中间那个纯空格节点不会被保留为独立节点，而是参与拼接

需要注意的边界情况

normalize() 不会影响非文本节点，也不处理注释、元素或属性。它不会：

• 修改节点顺序或删除非空元素节点
• 去除文本内的多余空格（比如 "a   b" 还是原样，只是变成单个文本节点）
• 自动识别并合并被注释或元素隔开的文本节点（必须是“相邻”的 Text 节点）
• 修复因 innerHTML 赋值产生的结构问题（此时应优先用 normalize()，但需确保操作的是已挂载或已创建的节点对象）