Range.detach() — Methode · JavaScript-Referenz

Signatur

Range.prototype.detach()

Beschreibung

Ursprünglich, in der Spezifikation DOM Level 2 Traversal and Range, gab Range.detach() ein Range-Objekt frei. Danach war es nicht mehr nutzbar, und jeder weitere Zugriff löste eine InvalidStateError-Ausnahme aus. Die Idee dahinter: Der Browser sollte keine Ressourcen mehr aufwenden, um den Bereich bei DOM-Änderungen aktuell zu halten.

Laut aktuellem DOM Living Standard ist detach() eine No-Op, also eine Methode ohne jede Wirkung. Der Range bleibt nach dem Aufruf voll nutzbar. Start, Ende und Inhalt ändern sich nicht. Die Speicherverwaltung übernimmt vollständig der Garbage Collector: Sobald nichts mehr auf einen Range verweist, wird er automatisch freigegeben.

In neuem Code solltest du detach() nicht mehr aufrufen. Es gibt die Methode nur, damit älterer Code weiterläuft, der sie noch verwendet. Willst du einen Bereich „leeren“ oder zurücksetzen, nimm stattdessen Range.collapse(). Soll ein Bereich aus der aktuellen Auswahl verschwinden, ist Selection.removeRange() bzw. Selection.removeAllRanges() das richtige Werkzeug.

Rückgabewert

Typ

undefined

Beschreibung

Gibt nichts zurück (undefined).

Beispiele

detach() hat keine Wirkung

const range = document.createRange();
range.selectNodeContents(document.body);

const vorher = range.toString().length;
range.detach(); // tut nichts
const nachher = range.toString().length;

console.log(vorher === nachher);
console.log(range.collapsed);

true false

Range ist nach detach() weiter nutzbar

const p = document.createElement('p');
p.textContent = 'Hallo Welt';
document.body.append(p);

const range = document.createRange();
range.setStart(p.firstChild, 0);
range.setEnd(p.firstChild, 5);
range.detach();

// Früher: InvalidStateError – heute funktioniert es
console.log(range.toString());

Hallo

Legacy-Code modernisieren

// Alt:
// const r = document.createRange();
// ... Arbeit ...
// r.detach();

// Neu: einfach keine Referenz mehr halten
const markiereText = (node) => {
  const r = document.createRange();
  r.selectNodeContents(node);
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(r);
  // kein detach() nötig – der Garbage Collector räumt auf
};

markiereText(document.body);

// Wichtig · Fallstricke

Veraltet: Die Methode hat keine Funktion mehr. Browser behalten sie nur, damit älterer Code nicht bricht. Rufe sie in neuem Code nicht auf.
Kein Zurücksetzen: Nach detach() hat der Range weiterhin dieselben Grenzen. Zum Zurücksetzen dient Range.collapse().
Alte Browser: Sehr alte Browser wie der Internet Explorer vor Version 9 oder frühe Gecko- bzw. WebKit-Versionen lösten nach detach() bei weiteren Zugriffen einen InvalidStateError aus. Code, der auch dort laufen soll, darf einen Range nach detach() also nicht weiterverwenden.
Genauso ohne Wirkung ist NodeIterator.detach().

Siehe auch

Range Range.collapse() Cache.matchAll() new NDEFMessage() Range.setEnd()