Selection.removeAllRanges() — Methode · JavaScript-Referenz

Signatur

Selection.prototype.removeAllRanges()

Beschreibung

removeAllRanges() hebt die aktuelle Textauswahl eines Dokuments komplett auf. Danach ist selection.rangeCount gleich 0, anchorNode und focusNode sind null und isCollapsed ist true. Das Selection-Objekt erhält man über window.getSelection() oder document.getSelection().

Typische Einsatzfälle sind das programmgesteuerte Setzen einer neuen Auswahl (zuerst alle Bereiche entfernen, dann mit addRange() einen neuen Bereich hinzufügen), das Aufheben einer Markierung nach einer „Kopieren“-Aktion oder das Zurücksetzen der Auswahl beim Schließen eines Dialogs oder Kontextmenüs.

Die Methode ist funktional gleichwertig mit Selection.empty(), das als Alias existiert. Für neuen Code wird removeAllRanges() empfohlen, weil der Name klarer und die Methode im Standard verankert ist.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Aktuelle Auswahl aufheben

const selection = window.getSelection();
console.log('Vorher:', selection.rangeCount);

selection.removeAllRanges();

console.log('Nachher:', selection.rangeCount);
console.log('anchorNode:', selection.anchorNode);

Vorher: 1 Nachher: 0 anchorNode: null

Inhalt eines Elements programmgesteuert markieren

// Markiert den gesamten Inhalt eines Code-Blocks per Klick
const selectContents = (element) => {
  const range = document.createRange();
  range.selectNodeContents(element);

  const selection = window.getSelection();
  selection.removeAllRanges(); // alte Auswahl entfernen
  selection.addRange(range);   // neue Auswahl setzen
};

document.querySelector('pre.code').addEventListener('click', (event) => {
  selectContents(event.currentTarget);
});

Nach dem Kopieren die Markierung zurücksetzen

const copyButton = document.querySelector('#copy');
const snippet = document.querySelector('#snippet');

copyButton.addEventListener('click', async () => {
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(snippet);
  selection.removeAllRanges();
  selection.addRange(range);

  await navigator.clipboard.writeText(selection.toString());

  // Markierung wieder entfernen, damit die Seite aufgeräumt aussieht
  selection.removeAllRanges();
  copyButton.textContent = 'Kopiert!';
});

// Wichtig · Fallstricke

Vor addRange() aufrufen: Die meisten Browser (Chrome, Safari) unterstützen nur einen einzigen Bereich pro Auswahl. Ruft man addRange() auf, ohne vorher removeAllRanges() zu verwenden, wird der neue Bereich je nach Browser ignoriert oder ersetzt. Nur Firefox unterstützt mehrere Bereiche.
Formularfelder: Die Auswahl innerhalb von <input> und <textarea> wird nicht zuverlässig über die Selection-API gesteuert. Dort besser setSelectionRange() verwenden bzw. den Cursor per element.setSelectionRange(pos, pos) kollabieren.
Shadow DOM: Auswahlen innerhalb von Shadow Roots verhalten sich browserabhängig; window.getSelection() liefert dort nicht immer die erwarteten Knoten.
Der Aufruf löst ein selectionchange-Ereignis auf document aus, sofern vorher etwas ausgewählt war.
Selection.empty() ist ein Alias mit identischem Verhalten.
Kompatibilität: In allen modernen Browsern verfügbar (auch sehr alte Versionen); in Node.js nicht vorhanden (nur mit DOM-Emulation wie jsdom).

Siehe auch

Selection Selection.empty() Range Selection.removeRange() Selection.addRange()