DOM CDATA 技术解析
CDATA（Character Data）是 XML 和 HTML DOM 中用于标记文本内容的一种特殊节点类型，其内容不会被解析器解析为标签或实体。CDATA 节点通常用于包含可能包含特殊字符（如 <、>、&）的文本内容。
CDATA 的基本概念
CDATA 节点通过 <![CDATA[ … ]]> 语法定义，其中的内容会被视为纯文本。在 DOM 中，CDATA 节点是 CDATASection 类型的实例，继承自 Text 节点。
<script type="text/javascript">
<![CDATA[
function compare(a, b) {
return a < b ? -1 : (a > b ? 1 : 0);
}
]]>
</script>
创建 CDATA 节点
在 JavaScript 中，可以通过 document.createCDATASection() 方法创建 CDATA 节点。
const xmlDoc = document.implementation.createDocument(null, "root");
const cdata = xmlDoc.createCDATASection("This is a CDATA section with <>& characters.");
xmlDoc.documentElement.appendChild(cdata);
console.log(new XMLSerializer().serializeToString(xmlDoc));
输出结果：
<root><![CDATA[This is a CDATA section with <>& characters.]]></root>
访问和操作 CDATA 节点
CDATA 节点可以通过 DOM 方法访问和操作，例如 getElementsByTagName 或 childNodes。
const xmlString = `<root><![CDATA[Sample text]]></root>`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
const cdata = xmlDoc.documentElement.childNodes[0];
console.log(cdata.nodeType); // 4 (CDATA_SECTION_NODE)
console.log(cdata.nodeValue); // "Sample text"
// 修改 CDATA 内容
cdata.nodeValue = "Updated CDATA content";
console.log(new XMLSerializer().serializeToString(xmlDoc));
输出结果：
<root><![CDATA[Updated CDATA content]]></root>
CDATA 与文本节点的区别
CDATA 节点和普通文本节点（Text）的主要区别在于解析行为：
- CDATA 节点中的内容不会被解析为 XML 标签或实体。
- 文本节点中的特殊字符（如 <、>）会被转义或解析。
const xmlDoc = document.implementation.createDocument(null, "root");
// 添加文本节点
const textNode = xmlDoc.createTextNode("This is a <test>");
xmlDoc.documentElement.appendChild(textNode);
// 添加 CDATA 节点
const cdataNode = xmlDoc.createCDATASection("This is a <test>");
xmlDoc.documentElement.appendChild(cdataNode);
console.log(new XMLSerializer().serializeToString(xmlDoc));
输出结果：
<root>This is a <test><![CDATA[This is a <test>]]></root>
实际应用场景
嵌入脚本或样式
在 XML 中嵌入 JavaScript 或 CSS 时，CDATA 可以避免特殊字符被解析。
<script>
<![CDATA[
if (x < y && y > z) {
console.log("Condition met");
}
]]>
</script>
存储原始数据
当需要存储包含 XML 保留字符的原始数据时，CDATA 非常有用。
<log>
<![CDATA[Error: File not found at path C:\\Documents\\file.txt]]>
</log>
动态生成 XML
在动态生成 XML 内容时，CDATA 可以简化特殊字符的处理。
function createXMLWithCDATA(content) {
const doc = document.implementation.createDocument(null, "data");
const cdata = doc.createCDATASection(content);
doc.documentElement.appendChild(cdata);
return new XMLSerializer().serializeToString(doc);
}
console.log(createXMLWithCDATA("Price < 100"));
注意事项
-
HTML 中的 CDATA
在 HTML 中，CDATA 仅适用于 <script> 和 <style> 标签，其他标签中的 CDATA 会被视为普通文本。 -
浏览器兼容性
某些旧版浏览器可能不支持 createCDATASection() 或对 CDATA 的处理不一致。 -
XML 序列化
使用 innerHTML 或 textContent 操作 CDATA 节点时可能导致序列化问题，建议使用 XMLSerializer。
通过以上示例和说明，可以清晰地理解 CDATA 在 DOM 中的用法和实际应用场景。
