Краткое справочное руководство по стандартному браузерному DOM Range API (document.createRange()).
🔗 Связанное руководство: Шпаргалка по DOM Selection API
Создание диапазона (Creating a Range)
const range = document.createRange();
Установка границ (Setting Boundaries)
// Установка начала и конца по узлу-контейнеру и смещению offset
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
// Установка относительно соседних элементов
range.setStartBefore(node);
range.setStartAfter(node);
range.setEndBefore(node);
range.setEndAfter(node);
// Быстрый выбор узла целиком или только его содержимого
range.selectNode(node); // Включает сам узел
range.selectNodeContents(node); // Выбирает все дочерние узлы внутри указанного элемента
Схлопывание диапазона (Collapsing Boundaries)
range.collapse(true); // Схлопнуть диапазон в начальную точку (курсор в начале)
range.collapse(false); // Схлопнуть диапазон в конечную точку (курсор в конце)
console.log(range.collapsed); // true, если точки начала и конца полностью совпадают
Манипуляция содержимым (Content Manipulation)
// Копирование: возвращает DocumentFragment без изменения DOM
const fragment = range.cloneContents();
// Вырезание: удаляет содержимое из DOM и возвращает DocumentFragment
const extracted = range.extractContents();
// Удаление: полностью стирает содержимое из DOM
range.deleteContents();
// Вставка узла в начальную позицию диапазона
range.insertNode(newNode);
// Оборачивание содержимого диапазона новым элементом
range.surroundContents(document.createElement('mark'));
Свойства только для чтения (Read-Only Properties)
range.startContainer: Узел, в котором начинается диапазон.range.startOffset: Числовое смещение внутри startContainer.range.endContainer: Узел, в котором заканчивается диапазон.range.endOffset: Числовое смещение внутри endContainer.range.commonAncestorContainer: Наиболее глубокий общий предок обоих контейнеров.range.toString(): Текстовое содержимое диапазона в виде строки.