Signatur
Beschreibung
Die schreibgeschützte Eigenschaft length des Interfaces CharacterData gibt an, wie viele Zeichen im Inhalt eines zeichenbasierten Knotens stehen. Der Wert entspricht immer node.data.length. Er ist eine nicht-negative ganze Zahl, bei einem leeren Knoten also 0.
CharacterData ist ein abstraktes Interface. In der Praxis nutzt du length deshalb über die abgeleiteten Knotentypen Text, Comment, CDATASection und ProcessingInstruction. Häufig brauchst du die Eigenschaft zusammen mit den Methoden, die mit Positionen arbeiten: substringData(), insertData(), deleteData(), replaceData() und Text.splitText(). Auch bei der Arbeit mit Range und Selection ist sie nützlich, etwa um mit range.setEnd(textNode, textNode.length) das Ende eines Textknotens anzusteuern.
Wichtig: Gezählt werden UTF-16-Codeeinheiten, keine sichtbaren Zeichen (Grapheme). Emojis und andere Zeichen außerhalb der Basic Multilingual Plane zählen als 2. Kombinierte Zeichen wie e plus ein kombinierender Akzent zählen ebenfalls mehrfach.
Rückgabewert
data, eine nicht-negative ganze Zahl (unsigned long).Beispiele
Länge eines Textknotens und eines Kommentars ermitteln
const text = document.createTextNode('Hallo Welt');
const comment = document.createComment(' TODO ');
console.log(text.length); // 10
console.log(comment.length); // 6
console.log(document.createTextNode('').length); // 0Fallstrick: Emojis und Surrogatpaare
const node = document.createTextNode('Hi 😀');
console.log(node.length); // 5 (Emoji = 2 Codeeinheiten)
console.log([...node.data].length); // 4 (Codepoints)
// Grapheme korrekt zählen
const seg = new Intl.Segmenter('de', { granularity: 'grapheme' });
console.log([...seg.segment(node.data)].length); // 4Cursor ans Ende eines Textknotens setzen
const p = document.createElement('p');
p.contentEditable = 'true';
p.textContent = 'Bearbeite mich';
document.body.append(p);
const textNode = p.firstChild;
const range = document.createRange();
range.setStart(textNode, textNode.length);
range.collapse(true);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
p.focus();
console.log(`Cursor bei Offset ${textNode.length}`);Mit length sicher Teilstrings und Aufteilungen berechnen
const node = document.createTextNode('Überschrift: Einleitung');
const mitte = Math.floor(node.length / 2);
// Letzte 10 Codeeinheiten auslesen
console.log(node.substringData(node.length - 10, 10)); // 'Einleitung'
// Knoten in der Mitte teilen
const rest = node.splitText(mitte);
console.log(node.length, rest.length); // 11 12// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung wie
node.length = 3wird im nicht-strikten Modus stillschweigend ignoriert und löst im Strict Mode einenTypeErroraus. Kürzen kannst du den Inhalt mitdeleteData()oder überdata. - UTF-16: Offsets für
substringData()& Co. werden ebenfalls in Codeeinheiten angegeben. Wenn du mitten in einem Surrogatpaar trennst, entstehen ungültige Zeichen. Zum Zählen sichtbarer Zeichen nimmIntl.Segmenter. - Offsets außerhalb des Bereichs: Ein Offset größer als
lengthinsubstringData(),insertData()odersplitText()löst eineDOMException(IndexSizeError) aus. - Nur ein Knoten:
lengthbezieht sich nur auf den einen Knoten. Für den gesamten Text eines Elements verwendeelement.textContent.length. Leerraum-Textknoten aus der HTML-Formatierung werden mitgezählt. - Kompatibilität: Wird seit DOM Level 1 von allen Browsern unterstützt, auch in jsdom und ähnlichen DOM-Umgebungen unter Node.js.