Riferimento rapido

Foglio di riferimento DOM Selection API

Guida rapida di riferimento per l'API DOM Selection del browser con document.getSelection: gestione dei range, collasso del cursore ed eventi.

· Pubblicato

Guida rapida di riferimento per l'API del browser DOM Selection API (window.getSelection()).

🔗 Correlato: Foglio di riferimento DOM Range API

Ottenere la selezione corrente (Getting Current Selection)

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

Gestione dei Range (Range Management)

// Accedere al range attivo
const rangeCount = selection.rangeCount;
if (rangeCount > 0) {
  const currentRange = selection.getRangeAt(0);
}

// Cancella tutte le selezioni attive (deseleziona il testo)
selection.removeAllRanges();

// Imposta una nuova selezione a livello di codice
selection.addRange(range);

// Rimuove uno specifico range
selection.removeRange(range);

Cursore e collasso (Caret & Collapsing)

// Collassa la selezione su un singolo punto (cursore)
selection.collapse(parentNode, offset);

// Collassa all'inizio o alla fine
selection.collapseToStart();
selection.collapseToEnd();

// Controlla se la selezione e attualmente collassata (cursore lampeggiante)
const isCaret = selection.isCollapsed;

Eliminazione della selezione (Selection Deletion)

// Rimuove il contenuto selezionato direttamente dal live DOM
selection.deleteFromDocument();

Eventi di modifica della selezione (Selection Change Events)

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

Argomenti correlati