DOM Selection API Spiekbrief

Korte handleiding voor de browser DOM Selection API (window.getSelection()).

🔗 Gerelateerd: DOM Range API Spiekbrief

Huidige selectie ophalen (Getting Current Selection)

const selection = window.getSelection(); // of document.getSelection()
const selectedText = selection.toString();

---

Bereikbeheer (Range Management)

// Toegang tot het actieve bereik
const rangeCount = selection.rangeCount;
if (rangeCount > 0) {
  const currentRange = selection.getRangeAt(0);
}

// Wis alle actieve selecties (deselecteert alle tekst)
selection.removeAllRanges();

// Stel programmatisch een nieuwe selectie in
selection.addRange(range);

// Verwijder een specifiek bereik
selection.removeRange(range);

---

Cursor en inklappen (Caret & Collapsing)

// Klap selectie in naar een enkel punt (cursor)
selection.collapse(parentNode, offset);

// Klap in naar begin- of eindgrens
selection.collapseToStart();
selection.collapseToEnd();

// Controleer of selectie is ingeklapt (knipperende cursor)
const isCaret = selection.isCollapsed;

---

Selectie verwijderen (Selection Deletion)

// Verwijdert geselecteerde inhoud uit het actieve DOM-document
selection.deleteFromDocument();

---

Selectiewijzigings-events (Selection Change Events)

document.addEventListener('selectionchange', () => {
  const sel = document.getSelection();
  // Registreer selectiewijziging
  console.log('Selection changed:', sel.toString());
});