DOM CDATA 学习笔记

什么是 CDATA

CDATA（Character Data）是XML标记语言中一种特殊的数据块，用于包含文本内容中的特殊字符，如大于号（>）、小于号（<）、引号（"）和单引号（'）等。CDATA 块中的所有内容都会被解析器忽略。

如何使用 CDATA

在 XML 中使用 CDATA 非常简单，只需要使用 <![CDATA[...]]> 标签包裹文本内容即可。

xmlCopy Code
<example>
    <title>This is an example</title>
    <content><![CDATA[
        This is a <strong>bold</strong> text with "quotes" and 'single quotes'.
    ]]></content>
</example>

上面的代码片段展示了如何在 XML 文档中使用 CDATA 包裹一段文本内容。当解析器读取该 XML 文档时，CDATA 中的文本内容将被忽略。

在 JavaScript 中创建 CDATA

在 JavaScript 中创建 CDATA 也很简单，只需要使用 document.createCDATASection() 方法即可。

javascriptCopy Code
const cdata = document.createCDATASection(`
    This is a <strong>bold</strong> text with "quotes" and 'single quotes'.
`);

上面的代码片段展示了如何在 JavaScript 中创建一个 CDATA 节点，并将其插入到 DOM 树中的某个元素中。

实例

以下是一个使用 CDATA 的实际例子。该例子展示了如何在 XML 文档中使用 CDATA 包裹一段 HTML 代码，以便在浏览器中解析并显示该 HTML 内容。

xmlCopy Code
<example>
    <title>This is an example</title>
    <content><![CDATA[
        <h1>Hello, world!</h1>
        <p>This is a <strong>bold</strong> text with "quotes" and 'single quotes'.</p>
    ]]></content>
</example>

上面的代码片段展示了一个 XML 文档，其中使用 CDATA 包裹了一段 HTML 代码。当浏览器读取该 XML 文档时，HTML 代码将被解析器正确解析，并将其插入到 DOM 树中。