Korte handleiding voor de standaard browser DOM Range API (document.createRange()).
🔗 Gerelateerd: DOM Selection API Spiekbrief
Een Range aanmaken (Creating a Range)
const range = document.createRange();
Grenzen instellen (Setting Boundaries)
// Begin en einde instellen via node-container en offset
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
// Relatief instellen ten opzichte van omringende elementen
range.setStartBefore(node);
range.setStartAfter(node);
range.setEndBefore(node);
range.setEndAfter(node);
// Snelle selectie van een volledige node of inhoud
range.selectNode(node); // Bevat de node zelf
range.selectNodeContents(node); // Selecteert alle onderliggende nodes
Grenzen inklappen (Collapsing Boundaries)
range.collapse(true); // Klap bereik in naar beginpunt (cursor aan begin)
range.collapse(false); // Klap bereik in naar eindpunt (cursor aan einde)
console.log(range.collapsed); // true als begin- en eindpunt identiek zijn
Inhoudsmanipulatie (Content Manipulation)
// Kopieren: geeft DocumentFragment terug zonder DOM aan te passen
const fragment = range.cloneContents();
// Knippen: verwijdert inhoud uit DOM en geeft DocumentFragment
const extracted = range.extractContents();
// Verwijderen: verwijdert inhoud volledig uit DOM
range.deleteContents();
// Voegt een element in aan het begin van het bereik
range.insertNode(newNode);
// Omsluit de inhoud van het bereik met een element
range.surroundContents(document.createElement('mark'));
Alleen-lezen eigenschappen (Read-Only Properties)
range.startContainer: Node waar het bereik begint.range.startOffset: Nummer dat de offset aangeeft in startContainer.range.endContainer: Node waar het bereik eindigt.range.endOffset: Nummer dat de offset aangeeft in endContainer.range.commonAncestorContainer: Diepste gemeenschappelijke voorouder van beide nodes.range.toString(): Tekstuele inhoud binnen het bereik als string.