Signatur
Beschreibung
Die Eigenschaft data enthält den Textinhalt eines Knotens, der vom abstrakten Interface CharacterData erbt. Dazu gehören Text (Textknoten in Elementen), Comment (HTML-/XML-Kommentare), CDATASection (nur in XML-Dokumenten) und ProcessingInstruction. Der Wert ist immer ein string, den du lesen und auch überschreiben kannst.
Du nutzt data, wenn du gezielt mit einzelnen Textknoten arbeitest statt mit ganzen Elementen, zum Beispiel beim Durchlaufen des DOM mit einem TreeWalker, beim Hervorheben von Suchbegriffen, beim Ersetzen von Platzhaltern oder beim Auslesen von Kommentaren. Anders als element.textContent oder innerHTML ändert eine Zuweisung an data nur diesen einen Knoten. Geschwisterknoten und die Struktur des Elternelements bleiben unberührt.
Bei CharacterData-Knoten sind data, nodeValue und textContent gleichwertig: Alle drei liefern und setzen denselben Wert. Weist du null zu, wird das als leere Zeichenkette behandelt. Jeder andere Wert wird in einen String umgewandelt. Die Länge des Inhalts kannst du über CharacterData.length abfragen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | Nur beim Setzen: der neue Textinhalt. null wird zu "", andere Werte werden per String() umgewandelt. Der Wert wird nicht als HTML interpretiert. |
Rückgabewert
< oder & erscheinen im Klartext, nicht als Entities.Beispiele
Textknoten lesen und ändern
// <p id="gruss">Hallo Welt</p>
const p = document.getElementById('gruss');
const textNode = p.firstChild; // Text-Knoten
console.log(textNode.data);
textNode.data = 'Hallo programmierung.net';
console.log(p.textContent);Kommentar-Inhalt auslesen
// <div id="box"><!-- build: 2024-05-01 -->Inhalt</div>
const box = document.getElementById('box');
const comment = [...box.childNodes]
.find((n) => n.nodeType === Node.COMMENT_NODE);
console.log(comment.data.trim());Platzhalter in allen Textknoten ersetzen (TreeWalker)
const ersetzePlatzhalter = (root, werte) => {
const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
let node;
while ((node = walker.nextNode())) {
// Nur den Text ändern, Struktur und Event-Listener bleiben erhalten
node.data = node.data.replace(/\{\{(\w+)\}\}/g,
(treffer, key) => werte[key] ?? treffer);
}
};
document.body.innerHTML = '<p>Hallo {{name}}, du hast <b>{{anzahl}}</b> Nachrichten.</p>';
ersetzePlatzhalter(document.body, { name: 'Anna', anzahl: 3 });
console.log(document.body.textContent);Sichere Textausgabe ohne HTML-Interpretation
const eingabe = '<img src=x onerror=alert(1)>';
const text = document.createTextNode('');
text.data = eingabe; // wird als reiner Text gespeichert
document.body.append(text);
console.log(document.body.innerHTML.includes('<img'));
console.log(text.data === text.nodeValue);// Wichtig · Fallstricke
- Nur für CharacterData-Knoten: Elemente haben keine
data-Eigenschaft (sie liefertundefined). Prüfe vorher mitnode.nodeType === Node.TEXT_NODEoder nimmtextContent. - Leerraum-Knoten:
element.firstChildist oft ein Textknoten, der nur aus Zeilenumbrüchen oder Leerzeichen besteht. Das ist ein häufiger Grund für unerwartete Ergebnisse. - Sicherheit: Werte werden nie als HTML geparst, deshalb ist
datagut gegen XSS geeignet. Achtung bei Kommentaren: Wenn du Nutzereingaben inComment.dataschreibst, kann die Zeichenfolge-->beim späteren Serialisieren überinnerHTMLoderouterHTMLden Kommentar vorzeitig beenden. - Performance: Wenn du nur Text änderst, ist
dataschneller alsinnerHTML, weil nichts neu geparst wird. Jede Zuweisung löst einenMutationObserver-Eintrag vom TypcharacterDataaus. - Zeichen- und Längenangaben (
length,substringData()) zählen UTF-16-Codeeinheiten, nicht Unicode-Zeichen. Emojis zählen daher doppelt. - Kompatibilität: Die Eigenschaft wird seit DOM Level 1 von allen Browsern unterstützt, auch vom Internet Explorer.