Краткий справочник

Шпаргалка по DOM Selection API

Справочное руководство по браузерному DOM Selection API с document.getSelection: управление диапазонами, схлопывание курсора и события выделения.

· Опубликовано

Краткое справочное руководство по браузерному DOM Selection API (window.getSelection()).

🔗 Связанное руководство: Шпаргалка по DOM Range API

Получение текущего выделения (Getting Current Selection)

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

Управление диапазонами (Range Management)

// Доступ к активному диапазону
const rangeCount = selection.rangeCount;
if (rangeCount > 0) {
  const currentRange = selection.getRangeAt(0);
}

// Очистка всех активных выделений (снимает выделение текста)
selection.removeAllRanges();

// Программная установка нового выделения
selection.addRange(range);

// Удаление определенного диапазона
selection.removeRange(range);

Курсор и схлопывание (Caret & Collapsing)

// Схлопывание выделения в одну точку (курсор ввода)
selection.collapse(parentNode, offset);

// Схлопывание к начальной или конечной границе
selection.collapseToStart();
selection.collapseToEnd();

// Проверка, является ли выделение точечным (мигающий курсор)
const isCaret = selection.isCollapsed;

Удаление содержимого выделения (Selection Deletion)

// Удаляет выделенное содержимое прямо из живого документа DOM
selection.deleteFromDocument();

События изменения выделения (Selection Change Events)

document.addEventListener('selectionchange', () => {
  const sel = document.getSelection();
  // Логирование изменения выделения
  console.log('Selection changed:', sel.toString());
});

Связанные темы