Signatur
Beschreibung
Range.deleteContents() löscht alles, was zwischen dem Start- und dem Endpunkt eines Range liegt. Knoten, die vollständig im Bereich liegen, werden aus dem DOM entfernt. Liegt ein Randknoten nur teilweise im Bereich, etwa ein Textknoten, in dem die Auswahl mitten im Wort beginnt, wird nur der ausgewählte Teil entfernt. Das Element selbst bleibt dabei erhalten. So entsteht keine ungültige Baumstruktur.
Die Methode eignet sich für Rich-Text-Editoren, eigene Befehle wie „Auswahl löschen“ oder „Auswahl ersetzen“ und für das gezielte Leeren von Containern. Ein typisches Vorgehen: Mit window.getSelection().getRangeAt(0) holt man den aktuellen Bereich, ruft deleteContents() auf und fügt danach mit insertNode() neuen Inhalt ein.
Nach dem Aufruf ist der Range zusammengeklappt (collapsed === true). Start- und Endpunkt liegen dann an der Stelle, an der vorher der Inhalt war. Die gelöschten Knoten bekommt man nicht zurück. Wer sie noch braucht, zum Beispiel für Ausschneiden oder Rückgängig machen, verwendet extractContents() oder vorher cloneContents().
Rückgabewert
undefined).Beispiele
Inhalt eines Containers vollständig leeren
// HTML: <div id="box"><p>Eins</p><p>Zwei</p></div>
const box = document.getElementById('box');
const range = document.createRange();
range.selectNodeContents(box);
range.deleteContents();
console.log(box.innerHTML);
console.log(range.collapsed);Teil eines Textknotens löschen
// HTML: <p id="satz">Hallo schöne Welt</p>
const text = document.getElementById('satz').firstChild;
const range = document.createRange();
range.setStart(text, 6); // vor „schöne“
range.setEnd(text, 13); // nach „schöne “
range.deleteContents();
console.log(document.getElementById('satz').textContent);Aktuelle Benutzerauswahl durch Text ersetzen
const replaceSelection = (replacement) => {
const selection = window.getSelection();
if (!selection || selection.rangeCount === 0) return;
const range = selection.getRangeAt(0);
range.deleteContents();
const node = document.createTextNode(replacement);
range.insertNode(node);
// Cursor hinter den eingefügten Text setzen
range.setStartAfter(node);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
};
document.getElementById('btn-ersetzen')
.addEventListener('click', () => replaceSelection('[entfernt]'));Über Elementgrenzen hinweg löschen
// HTML: <p id="p">Das ist <strong>sehr wichtig</strong> hier.</p>
const p = document.getElementById('p');
const range = document.createRange();
range.setStart(p.firstChild, 4); // nach „Das “
range.setEnd(p.querySelector('strong').firstChild, 5); // nach „sehr “
range.deleteContents();
console.log(p.innerHTML);// Wichtig · Fallstricke
- Nicht umkehrbar: Die entfernten Knoten gehen verloren. Wer sie später noch braucht, etwa für Ausschneiden oder Rückgängig, nimmt
extractContents(), denn diese Methode gibt einDocumentFragmentzurück. - Teilweise ausgewählte Elemente bleiben stehen: Beginnt oder endet der Bereich mitten in einem Element, wird nur dessen Inhalt gekürzt, das Element selbst bleibt. Dadurch können leere Elemente wie
<strong></strong>übrig bleiben, die man eventuell selbst aufräumen muss. - Kein Eintrag im Rückgängig-Verlauf: Änderungen über die Range-API landen nicht im nativen Undo-Stapel des Browsers. In
contenteditable-Bereichen funktioniert Strg+Z danach meist nicht wie erwartet. - Fehler: Enthält der Bereich einen
DocumentType-Knoten, wirft die Methode einenHierarchyRequestError. Auch Knoten, die nicht verändert werden dürfen, können einenDOMExceptionauslösen. - Leerer Bereich: Ist der Range bereits zusammengeklappt (
collapsed), passiert nichts. - Kompatibilität: Wird von allen modernen Browsern seit Langem unterstützt.
StaticRangebietet diese Methode nicht.