CDATASection — Schnittstelle · JavaScript-Referenz

Signatur

interface CDATASection extends Text

Beschreibung

Die Schnittstelle CDATASection steht für einen CDATA-Abschnitt in einem XML-Dokument. Innerhalb von <![CDATA[ und ]]> werden Zeichen wie < und & nicht als Markup ausgewertet. Deshalb eignen sich solche Abschnitte gut, um Code-Schnipsel, eingebettetes HTML oder Skripte in XML abzulegen, ohne jedes Sonderzeichen einzeln maskieren zu müssen.

CDATASection erbt von Text und damit von CharacterData und Node. Eigene Eigenschaften oder Methoden hat die Schnittstelle nicht. Den Inhalt liest und ändert man über data, nodeValue oder textContent. Die Eigenschaft nodeType hat den Wert Node.CDATA_SECTION_NODE (4), nodeName ist "#cdata-section".

Erzeugt wird ein Knoten mit Document.prototype.createCDATASection(), allerdings nur in XML-Dokumenten, etwa aus DOMParser mit "application/xml" oder aus document.implementation.createDocument(). Beim Serialisieren mit XMLSerializer bleibt die CDATA-Syntax erhalten.

Rückgabewert

Typ

CDATASection

Beschreibung

Eine Instanz entsteht über xmlDoc.createCDATASection(data). Es gibt keinen öffentlichen Konstruktor.

Beispiele

CDATA-Abschnitt in einem XML-Dokument erzeugen

const xmlDoc = new DOMParser().parseFromString('<snippet/>', 'application/xml');
const cdata = xmlDoc.createCDATASection('if (a < b && c > d) { run(); }');
xmlDoc.documentElement.appendChild(cdata);

console.log(new XMLSerializer().serializeToString(xmlDoc));
console.log(cdata.nodeType === Node.CDATA_SECTION_NODE, cdata.nodeName);

<snippet><![CDATA[if (a d) { run(); }]]></snippet> true "#cdata-section"

CDATA-Inhalte aus einem RSS-Feed auslesen

const rss = `<rss><channel><item>
  <title>News</title>
  <description><![CDATA[<p>Neu: <strong>Version 2.0</strong></p>]]></description>
</item></channel></rss>`;

const doc = new DOMParser().parseFromString(rss, 'application/xml');
const desc = doc.querySelector('description');
const node = [...desc.childNodes].find(n => n.nodeType === Node.CDATA_SECTION_NODE);

console.log(node instanceof CDATASection);
console.log(node.data);

true Neu: Version 2.0

Inhalt über geerbte CharacterData-Methoden ändern

const doc = document.implementation.createDocument(null, 'config', null);
const cdata = doc.createCDATASection('Wert: 1 < 2');
doc.documentElement.appendChild(cdata);

cdata.appendData(' & 3 > 2');
console.log(cdata.length, cdata.data);
console.log(doc.documentElement.textContent);

19 "Wert: 1 < 2 & 3 > 2" Wert: 1 < 2 & 3 > 2

// Wichtig · Fallstricke

Nur in XML: In einem HTML-Dokument wirft document.createCDATASection() eine NotSupportedError-DOMException. Der HTML-Parser erkennt CDATA nur innerhalb von SVG- und MathML-Inhalten. Sonst wird <![CDATA[...]]> als Kommentar behandelt.
Kein ]]> im Inhalt: Die Zeichenfolge ]]> beendet einen CDATA-Abschnitt. createCDATASection() wirft deshalb eine InvalidCharacterError, wenn sie im Text vorkommt. Wer sie trotzdem braucht, teilt den Inhalt auf mehrere Abschnitte auf: ]]]]><![CDATA[>.
Sicherheit: CDATA-Inhalte werden nicht bereinigt. Wer HTML aus CDATA (z. B. aus RSS-Feeds) mit innerHTML einfügt, riskiert XSS. Solche Inhalte also vorher bereinigen (z. B. mit DOMPurify) oder über textContent einfügen.
normalize() fügt CDATASection-Knoten nicht mit benachbarten Text-Knoten zusammen. textContent des Elternelements liefert jedoch den verbundenen Text.
Die Schnittstelle wird von allen modernen Browsern und von Node.js-DOM-Implementierungen wie jsdom unterstützt.

Siehe auch

Text CharacterData Document.prototype.createCDATASection() DOMParser XMLSerializer Node.nodeType