HTML DOM normalize 方法（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在网页开发中，HTML DOM（文档对象模型）是连接 HTML 内容与 JavaScript 的桥梁。通过 DOM，开发者可以动态修改页面结构、样式或行为。然而，DOM 节点的操作往往伴随着一些“隐藏问题”，例如文本节点的碎片化、空节点残留等。此时，HTML DOM normalize 方法便成为了一把“整理工具”，能够自动清理这些冗余，确保 DOM 结构的整洁与高效。

本文将从基础概念出发，逐步解析 normalize 方法的原理、使用场景及实际案例，帮助开发者深入理解其作用，并掌握在项目中灵活运用的技巧。

一、什么是 HTML DOM normalize 方法？

1.1 定义与核心功能

normalize() 是 HTML DOM 节点（Node）对象的一个方法，其核心目标是“标准化”当前节点及其子节点的结构。具体来说，它会执行以下操作：

• 合并相邻文本节点：如果两个或多个文本节点（text node）相邻，normalize 会将它们合并为一个文本节点。
• 删除空文本节点：若文本节点的内容为空（例如仅包含空格或换行符），则将其从 DOM 中移除。
• 清理注释节点：虽然 normalize 主要针对文本节点，但也会删除空注释节点（如 <!-- -->）。

1.2 一个直观的比喻

想象 DOM 结构像一座由积木搭建的建筑：

• 文本节点是散落的碎木块，可能因动态操作（如插入文本）而重复或分散。
• normalize 方法就像一位“建筑整理师”，自动将零散的碎木块拼接成完整板块，并移除无用的空盒子。

二、为什么需要 normalize？

2.1 场景一：动态生成内容时的文本碎片化

在 JavaScript 动态操作 DOM 时，频繁插入或修改文本可能导致节点分裂。例如：

const div = document.createElement('div');
div.appendChild(document.createTextNode('Hello'));
div.appendChild(document.createTextNode(' ')); // 空格
div.appendChild(document.createTextNode('World'));
// 此时，div 内有 3 个文本节点

若后续需要获取完整文本内容，需遍历所有子节点，代码会变得复杂。调用 div.normalize() 后，三个文本节点会合并为一个，直接通过 div.textContent 即可获取结果。

2.2 场景二：解析 HTML 时的意外空节点

当通过 innerHTML 或 XML 解析器生成 DOM 时，HTML 源码中的空白字符（如换行、缩进）会被自动转换为文本节点。例如：

<div>
    <span>Text</span>
    <!-- 这里的换行和空格会生成空文本节点 -->
</div>

此时，div 的子节点可能包含文本节点、元素节点，甚至注释节点。调用 normalize 后，这些无意义的空文本节点会被清理，简化后续操作。

三、normalize 方法的实现原理

3.1 深入 DOM 节点类型

要理解 normalize 的工作原理，需先了解 DOM 节点类型：
| 节点类型 | 说明 |
|----------|------|
| ELEMENT_NODE | HTML 元素（如 <div>） |
| TEXT_NODE | 纯文本内容（如 "Hello World"） |
| COMMENT_NODE | 注释内容（如 <!-- 注释 -->） |

Normalize 方法仅对 TEXT_NODE 和 COMMENT_NODE 进行清理，而元素节点不受影响。

3.2 算法步骤解析

Normalize 的核心逻辑可概括为以下流程：

1. 遍历当前节点的所有子节点，从第一个开始检查。
2. 合并相邻文本节点：若连续两个子节点均为文本节点，则将它们的内容拼接，并删除第二个节点。
3. 移除空文本/注释节点：若节点内容为空（如 textNode.data === '' 或 commentNode.data === ''），则直接删除该节点。
4. 递归处理子节点的子节点：若某个子节点是元素节点，重复上述步骤，直到整个子树标准化完成。

四、代码实战：normalize 的常见用法

4.1 基础案例：合并文本节点

// 创建包含多个文本节点的元素
const parent = document.createElement('div');
parent.appendChild(document.createTextNode('A'));
parent.appendChild(document.createTextNode('B'));
parent.appendChild(document.createTextNode(' ')); // 空格
parent.appendChild(document.createTextNode('C'));

console.log(parent.childNodes.length); // 输出 4（三个文本节点 + 空格）

// 调用 normalize 合并
parent.normalize();
console.log(parent.textContent); // 输出 "ABC"
console.log(parent.childNodes.length); // 输出 1（合并后的单个文本节点）

4.2 处理动态内容插入

假设用户通过表单输入内容，可能在 DOM 中产生空格或换行符：

const input = document.querySelector('input');
const outputDiv = document.getElementById('output');

input.addEventListener('input', () => {
    const text = input.value;
    // 直接插入可能导致节点分裂
    outputDiv.appendChild(document.createTextNode(text));
});

// 在更新后调用 normalize 清理冗余
outputDiv.normalize();

4.3 处理注释节点

const node = document.createElement('div');
node.appendChild(document.createComment('')); // 空注释节点
node.appendChild(document.createTextNode(' ')); // 空文本节点

node.normalize();
console.log(node.childNodes.length); // 输出 0（注释和空文本都被移除）

五、注意事项与进阶技巧

5.1 normalize 的局限性

• 不修改元素节点结构：它仅处理文本和注释节点，不会合并或删除元素节点。
• 递归作用范围：normalize 会递归处理当前节点的所有后代节点，但不会影响父节点。

5.2 与 textContent 属性的对比

虽然 node.textContent 可以获取合并后的文本内容，但 normalize 的优势在于：

• 直接修改 DOM 结构：使用 textContent 会删除所有子节点并替换为纯文本，而 normalize 保留原有元素节点，仅清理文本节点。

例如：

const container = document.querySelector('.container');
container.textContent = 'New Text'; // 删除所有子元素，仅保留文本
container.normalize(); // 保留子元素，仅清理文本节点

5.3 跨浏览器兼容性

Normalize 方法在现代浏览器（Chrome、Firefox、Safari 等）中均良好支持。但在 IE 9 及以下版本中，需通过手动合并节点实现类似效果。

六、实际应用场景与最佳实践

6.1 场景一：表单输入处理

在用户输入动态内容时，通过 normalize 避免冗余文本节点：

function updatePreview(input, previewElement) {
    previewElement.innerHTML = ''; // 清空原有内容
    previewElement.appendChild(document.createTextNode(input.value));
    previewElement.normalize(); // 确保无空节点
}

6.2 场景二：动态加载 HTML 内容

当通过 AJAX 加载外部 HTML 并插入页面时：

fetch('data.html')
    .then(response => response.text())
    .then(html => {
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = html;
        tempDiv.normalize(); // 清理加载时产生的空节点
        document.body.appendChild(tempDiv);
    });

6.3 最佳实践建议

• 在操作后调用 normalize：如频繁插入文本节点后，调用该方法确保结构清晰。
• 避免过度使用：若 DOM 结构简单或无需合并，无需额外调用。

结论：DOM 标准化的关键工具

通过本文的解析，我们认识到 HTML DOM normalize 方法 是维护 DOM 结构整洁的重要工具。它不仅简化了文本节点的管理，还为后续的 DOM 操作（如遍历、查询）奠定了高效基础。

对于开发者而言，掌握 normalize 的原理与用法，能够显著减少因节点碎片化导致的 bug，提升代码的可维护性。在实际项目中，结合动态内容生成、第三方 HTML 插入等场景，合理使用该方法将为代码质量加分。

未来，随着前端框架（如 React、Vue）的流行，DOM 操作可能被更高层次的抽象封装，但理解底层机制始终是进阶开发的基石。希望本文能帮助你更好地驾驭 HTML DOM 的细节，写出更优雅的代码。