Referencia rápida

Hoja de referencia de DOM Selection API

Guia rapida de referencia para DOM Selection API del navegador con document.getSelection: gestion de rangos, colapso de cursor y eventos de seleccion.

· Publicado

Guia rapida de referencia para la API del navegador DOM Selection API (window.getSelection()).

🔗 Relacionado: Hoja de referencia de DOM Range API

Obtener seleccion actual (Getting Current Selection)

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

Gestion de rangos (Range Management)

// Acceder al rango activo
const rangeCount = selection.rangeCount;
if (rangeCount > 0) {
  const currentRange = selection.getRangeAt(0);
}

// Borrar todas las selecciones activas (deselecciona todo el texto)
selection.removeAllRanges();

// Establecer nueva seleccion mediante codigo
selection.addRange(range);

// Eliminar un rango especifico
selection.removeRange(range);

Cursor y colapso (Caret & Collapsing)

// Colapsar seleccion a un solo punto (cursor)
selection.collapse(parentNode, offset);

// Colapsar hacia el limite inicial o final
selection.collapseToStart();
selection.collapseToEnd();

// Comprobar si la seleccion esta actualmente colapsada (cursor parpadeante)
const isCaret = selection.isCollapsed;

Eliminacion de seleccion (Selection Deletion)

// Elimina el contenido seleccionado del documento DOM en vivo
selection.deleteFromDocument();

Eventos de cambio de seleccion (Selection Change Events)

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

Temas relacionados