Referência rápida

Folha de dicas do DOM Selection API

Guia rapido de referencia para a API DOM Selection dos navegadores com document.getSelection: gestao de intervalos, cursor e eventos de selecao.

· Publicado

Guia rapido de referencia para a DOM Selection API (window.getSelection()).

🔗 Relacionado: Folha de dicas do DOM Range API

Obtendo a selecao atual (Getting Current Selection)

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

Gerenciamento de intervalos (Range Management)

// Acessar o intervalo ativo
const rangeCount = selection.rangeCount;
if (rangeCount > 0) {
  const currentRange = selection.getRangeAt(0);
}

// Limpar todas as selecoes ativas (desmarca o texto)
selection.removeAllRanges();

// Definir nova selecao programaticamente
selection.addRange(range);

// Remover um intervalo especifico
selection.removeRange(range);

Cursor e colapso (Caret & Collapsing)

// Colapsar a selecao para um unico ponto (cursor)
selection.collapse(parentNode, offset);

// Colapsar para o inicio ou fim
selection.collapseToStart();
selection.collapseToEnd();

// Verificar se a selecao esta colapsada (cursor piscante)
const isCaret = selection.isCollapsed;

Exclusao de selecao (Selection Deletion)

// Remove o conteudo selecionado diretamente do DOM ativo
selection.deleteFromDocument();

Eventos de mudanca de selecao (Selection Change Events)

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

Temas relacionados