跟着 MDN 学 HTML day_34：（深入XML 中的 CDATASection 接口）

在 Web 开发的学习旅程中，我们大部分时间都在与 HTML 打交道。然而，当涉及到数据存储、配置文件或 RSS 订阅时，XML 依然扮演着不可或缺的角色。今天，我们将聚焦于 XML 世界中一个看似不起眼但在特定场景下极其有用的接口：CDATASection。

本文将基于 MDN 的权威文档，深入剖析 CDATASection 的概念、用法、技术细节以及它为何不应出现在 HTML 中的原因。

一、CDATASection 的核心定义与存在意义

在标准的 XML 文档中，像 < 和 & 这样的字符具有特殊的语法含义。< 表示标签的开始，& 表示实体引用的开始。如果我们的文本数据中包含了大量的此类字符，比如一段 JavaScript 代码或者数学公式，逐一将其转义为 < 和 & 会变得极其繁琐，且严重降低数据的可读性。

这就引出了 CDATASection 接口。在 DOM 规范中，CDATASection 用于表示 XML 文档中的 CDATA 片段。其核心使命是告诉 XML 解析器："这部分内容包含的是纯文本，请不要尝试解析其中的任何标记或实体。"

从 DOM 继承关系来看，它的地位很明确：

EventTarget -> Node -> CharacterData -> Text -> CDATASection。

这意味着 CDATASection 本质上是一个特殊的文本节点。

二、CDATA 片段的语法构成与转义规则

CDATA 片段有着严格的语法格式，它由特定的开始标记和结束标记包裹。

text 复制代码

<![CDATA[ ... ]]>

我们来看一个实际的 XML 文档示例，对比普通文本节点与 CDATA 节点在面对特殊字符时的差异：

xml 复制代码

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <data>
        这是普通文本节点：<div> & "copyright"</div>
    </data>
    <data>
        这是CDATA文本节点：<![CDATA[<div> & "copyright"</div>]]>
    </data>
</root>

规则解释：

在第一个元素中，解析器在处理
& "copyright"
时会遇到困难，因为裸 < 的出现可能导致解析错误。而在第二个元素中，被 <! $CDATA\[ 和$ ]> 包裹的内容会被当作静态文本，所有字符保其原意。唯一的例外是，字符串 ]]> 本身表示 CDATA 的终止，因此在一个 CDATA 片段内部不能再次出现该闭合序列，否则会导致结构性错误。

三、在 DOM 中访问 CDATASection 节点

虽然大部分开发者不直接在脚本中创建 CDATA 节点，但在处理通过 XMLHttpRequest 或 DOMParser 获取的 XML 文档时，可能会碰到它。

在 DOM 解析完成后的节点树中，CDATASection 节点没有子节点。你可以通过 nodeType 属性来检测它，CDATASection 的 nodeType 值为常量 Node.CDATA_SECTION_NODE（即 4）。

javascript 复制代码

// 假设 xmlDoc 是一个解析好的 XML 文档对象
// 我们需要关闭 preserveWhiteSpace 或进行准确遍历

const parser = new DOMParser();
const xmlString = `<root><message><![CDATA[价格应该大于 0 且小于 10。 (x > 0 & x < 10)]]></message></root>`;
const xmlDoc = parser.parseFromString(xmlString, "application/xml");

// 获取 message 元素的第一个子节点
const messageNode = xmlDoc.getElementsByTagName("message")[0];
const cdataNode = messageNode.childNodes[0];

console.log(cdataNode.nodeType); // 输出: 4 (CDATA_SECTION_NODE)
console.log(cdataNode.nodeName); // 输出: "#cdata-section"
console.log(cdataNode.data);     // 输出: 价格应该大于 0 且小于 10。 (x > 0 & x < 10)

上述代码展示了如何通过 nodeType 辨识节点，以及直接通过 data 属性读取 CDATA 片段内的原始文本，这些文本中的特殊字符完好无损。

四、CDATASection 的属性与操作方法来源

CDATASection 接口本身是一个相对"轻薄"的接口。它没有定义任何自己独有的属性或方法。它的所有功能均继承自其父接口 Text，并沿着原型链上溯到 CharacterData 和 Node。

这意味着所有用于操作文本节点的标准工具都对 CDATASection 有效。你可以使用 length 获取字符长度，使用 appendData() 添加内容，使用 deleteData() 删除内容等。但这里有一点需要特别强调：这些操作都是基于文本逻辑的，DOM 不会阻止你通过脚本在 CDATA 内容中插入 ]]> 字符串。

javascript 复制代码

// 接续上面的示例代码
const cdataNode = xmlDoc.getElementsByTagName("message")[0].childNodes[0];

console.log("原始长度:", cdataNode.length);

// 使用继承自 CharacterData 的方法，在末尾追加文本
cdataNode.appendData(" 这里追加了一段新内容。");
console.log("追加后数据:", cdataNode.data);
console.log("追加后长度:", cdataNode.length);

// 警告：虽然可以执行，但手动拼接可能破坏 CDATA 结构
cdataNode.appendData(" 如果强行加入结束标志: ]]>");
console.log("破坏后的节点文本:", cdataNode.data);

虽然方法可用，但在动态修改 CDATA 内容时，如果不慎插入了闭合序列，在序列化该文档时，XML 解析器通常会自动处理转义，但可能会失去原本 CDATA 的封装形式。因此，除非确切知道后果，否则应避免在 CDATA 片段中动态插入 ]]>。

五、CDATASection 与 XML 序列化特性

当一个 CDATASection 节点需要被序列化为字符串时，它的行为与普通 Text 节点截然不同。

标准文本节点会将 <、>、& 等字符自动转义为对应的预定义实体，以保证 XML 的格式良好性。而序列化 CDATASection 节点时，其内容无需经过转义，只需用 <! $CDATA\[ 和$ ]> 包裹即可。这一特性使其成为包含大量 XML 元字符的内容（如 SVG 片段、嵌入的 HTML 样例或代码块）时的理想容器。

javascript 复制代码

const xmlDoc = document.implementation.createDocument("", "root", null);
const element = xmlDoc.createElement("sample");

// 创建一个 CDATASection 节点
const cdata = xmlDoc.createCDATASection("if (a < b && b > c) { return true; }");
element.appendChild(cdata);
xmlDoc.documentElement.appendChild(element);

// 使用 XMLSerializer 进行序列化
const serializer = new XMLSerializer();
const xmlString = serializer.serializeToString(xmlDoc);

console.log(xmlString);
// 输出: <root><sample><![CDATA[if (a < b && b > c) { return true; }]]></sample></root>

通过 createCDATASection() 方法和 XMLSerializer 的配合，可以清晰地观察到 CDATA 节点在输出时保持特殊字符原样的能力，这避免了数据被二次解析。

六、思考：为什么 CDATA 不应用于 HTML

这是 MDN 文档中的一条强调性注释：CDATA 片段不应该在 HTML 中被使用。这背后是 HTML 与 XML 解析模式的根本差异。

HTML 解析器是非严格的、设计用于容错的解析器。它不认识 <![CDATA[ 语法。在 HTML 上下文中，如果你想放置未经转义的文本，通常依赖特定元素的特性。例如，

html 复制代码

<!-- 错误演示：这段代码在 HTML 中无法起到 CDATA 的保护作用 -->
<!DOCTYPE html>
<html>
<body>
    <p>
        以下内容会被错误解析：
        <![CDATA[<div style="color: red;">这不会变红，而是破碎的标记</div>]]>
    </p>
</body>
</html>

如果浏览器将文档视作标准的 text/html，解析器会试图将
理解为常规的 HTML 标签，导致页面结构混乱。因此，保持 CDATA 的纯粹属性，只在 application/xml、text/xml 或相关 XML 体系统（如 SVG、MathML 的外部独立文件）中使用它，是保证程序健壮性的重要原则。

通过对 CDATASection 接口的系统学习，我们不仅掌握了一种处理 XML 特殊字符的优雅方案，也更深入地理解了 DOM 节点的继承架构与序列化机制。将它保留在合适的应用场景中，能让我们的代码逻辑在处理复杂数据时更加清晰。

想要解锁更多HTML 核心标签实战、前端零基础入门干货、开发避坑全指南吗？
持续关注，后续将更新CSS 布局实战、JavaScript 交互基础、全站导航开发等硬核内容，带你从新手快速进阶，轻松搞定前端开发！