Kurzreferenz fuer die standardisierte Browser-DOM-Range-API ueber document.createRange().
🔗 Verwandt: DOM Selection API Spickzettel
Range erstellen (Creating a Range)
const range = document.createRange();
Grenzen festlegen (Setting Boundaries)
// Start und Ende ueber Knoten-Container und Zeichen-/Kind-Index-Offset setzen
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
// Relativ zu umgebenden Elementen festlegen
range.setStartBefore(node);
range.setStartAfter(node);
range.setEndBefore(node);
range.setEndAfter(node);
// Schnellauswahl ueber einen gesamten Knoten oder dessen Inhalt
range.selectNode(node); // Schliesst den Knoten selbst ein
range.selectNodeContents(node); // Waehlt alle Kindknoten innerhalb des Knotens aus
Grenzen zusammenklappen (Collapsing Boundaries)
range.collapse(true); // Range auf Startpunkt zusammenklappen (Cursor am Anfang)
range.collapse(false); // Range auf Endpunkt zusammenklappen (Cursor am Ende)
console.log(range.collapsed); // true, wenn Start- und Endpunkt identisch sind
Inhaltsmanipulation (Content Manipulation)
// Kopieren: Gibt DocumentFragment zurueck, ohne DOM zu veraendern
const fragment = range.cloneContents();
// Ausschneiden: Entfernt Inhalte aus DOM und gibt DocumentFragment zurueck
const extracted = range.extractContents();
// Loeschen: Entfernt Inhalte vollstaendig aus dem DOM
range.deleteContents();
// Fuegt ein Element an der Startposition des Bereichs ein
range.insertNode(newNode);
// Umschliesst den Bereichsinhalt mit einem Element
range.surroundContents(document.createElement('mark'));
Schreibgeschuetzte Eigenschaften (Read-Only Properties)
range.startContainer: Knoten, an dem der Bereich beginnt.range.startOffset: Zahlenwert fuer den Offset in startContainer.range.endContainer: Knoten, an dem der Bereich endet.range.endOffset: Zahlenwert fuer den Offset in endContainer.range.commonAncestorContainer: Tiefster gemeinsamer Vorfahre beider Container.range.toString(): Textinhalt innerhalb des Bereichs als Zeichenkette.