Технология Selection.

  Технология Selection позволяет организовать работу с контентом Web-страницы выделенным на пользовательском устройстве отображения.
  Контент может быть выделен как пользователем, так и скриптом. Выделенный контент может состоять из одной или нескольких не обязательно граничащих друг с другом областей выделения.

  В технологии Selection можно работать с любым выделенным контентом (не только в редактируемых полях.)

  К сожалению не все браузеры поддерживают возможность выделения нескольких областей выделенного контента на Web-странице, в этом случае выделенный контент может содержать только одну область выделения.
  Selection
  Selection - Является интерфейсом к выделенному контенту Web-страницы.
  Экземпляр доступен:

  1. Через свойство selection объекта HTMLDocument
  2. С помощью метода getSelection объекта HTMLDocument
  3. С помощью метода getSelection объекта Window
  4. С помощью метода getSelection объекта ShadowRoot
  Selection свойства.
  anchorNode - Содержит ссылку на экземпляр объекта Node - узла, в котором находится начальная позиция выделенного контента (начинается выделение контента).
  Содержится ссылка только на узел, в котором непосредственно начато выделение, "родительские" узлы не считаются.
  Если этот узел является элементом тега, то начальная позиция будет находиться в поле этого элемента.
  Если этот узел является текстовым или комментарием, то начальная позиция будет находиться в соответствующем тексте.
  Выделение может быть начато пользователем как слева-направо, так и справа-налево. Соответственно программное выделение может быть таким же.
  Если выделения нет, то свойство anchorNode содержит значение null.

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.anchorNode

Значения формата записи:

  anchorOffset - Содержит положение начальной позиции выделенного контента в узле, заданном свойством anchorNode.
  Значение имеет числовой формат.
  Если этот узел является элементом тега, то положение начальной позиции в нём указывается номером узла из последовательности узлов сформированных HTML-кодом, который находится в поле этого элемента (не надо забывать про узлы Text и Comment).
  Если этот узел является текстовым или комментарием, то положение начальной позиции указывается номером символа в соответствующем тексте.
  Выделение может быть начато пользователем как слева-направо, так и справа-налево. Соответственно программное выделение может быть таким же.
  Однако положение всегда вычисляется по ходу следования HTML-кода документа (слева-направо, сверху-вниз).

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.anchorOffset

Значения формата записи:

  baseNode - Является алиасом свойства anchorNode.
  baseOffset - Является алиасом свойства anchorOffset.
  extentNode - Является алиасом свойства focusNode.
  extentOffset - Является алиасом свойства focusOffset.
  focusNode - Содержит ссылку на экземпляр объекта Node, в котором находится конечная позиция выделенного контента (заканчивается выделение контента).
  Содержится ссылка на узел, в котором непосредственно окончено выделение, "родительские" узлы не считаются.
  Если этот узел является элементом тега, то конечная позиция будет находиться в поле этого элемента.
  Если этот узел является текстовым или комментарием, то конечная позиция будет находиться в соответствующем тексте.
  Выделение может быть начато пользователем как слева-направо, так и справа-налево. Соответственно программное выделение может быть таким же.
  Если выделения нет, то свойство содержит значение null.

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.focusNode

Значения формата записи:

  focusOffset - Содержит положение конечной позиции выделенного контента в узле, заданном свойством focusNode.
  Значение имеет числовой формат.
  Если этот узел является элементом тега, то положение конечной позиции в нём указывается номером узла из последовательности узлов сформированных HTML-кодом, который находится в поле этого элемента (не надо забывать про узлы Text и Comment).
  Если этот узел является текстовым или комментарием, то положение конечной позиции указывается номером символа в соответствующем тексте.
  Выделение может быть начато пользователем как слева-направо, так и справа-налево. Соответственно программное выделение может быть таким же.
  Однако положение всегда вычисляется по ходу следования HTML-кода документа (слева-направо, сверху-вниз).

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.focusOffset

Значения формата записи:

  isCollapsed - Содержит значение true если начальная и конечная позиции выбранного контента совпадают, и значение false - в противном случае.
  Значение имеет логический формат.
  Если выделения нет, то свойство isCollapsed содержит значение true.

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.isCollapsed

Значения формата записи:

  rangeCount - Содержит количество областей выделенного контента ( экземпляров объекта Range).
  Значение имеет числовой формат.
  Если выделения нет, то свойство rangeCount содержит значение 0
  Визуально область выделения может быть и не видна на Web-странице, поэтому отсутствие выделения можно проверить по значению свойства rangeCount.

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.rangeCount

Значения формата записи:

  type - Содержит значение, которое указывает на тип этого экземпляра объекта (интерфейса) Selection.
  Значение имеет строковый формат.

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.type

Значения формата записи:

  • Экземпляр объекта Selection - Любой операнд значения со значением экземпляра объекта Selection.
  • . - Оператор доступа к свойству объекта.
  • type - Ключевое слово.
      Ссылается на оно из значений:
    • Caret - Интерфейс Selection соответствует выделенному контенту, в котором нет видимой области выделения, начальная и конечная позиции выбранного контента совпадают, и свойство isCollapsed содержит значение true.
    • None - "Пустой" (нет выделенного контента) интерфейс Selection.
    • Range - Интерфейс Selection соответствует выделенному контенту, в котором есть видимая область выделения, начальная и конечная позиции выбранного контента не совпадают, и свойство isCollapsed содержит значение false.
  Selection методы.
  addRange - Добавляет область выделения к выделенному контенту.
  Возвращает значение undefined.

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.addRange(Объект)

Значения формата записи:

  • Экземпляр объекта Selection - Любой операнд значения со значением экземпляра объекта Selection.
  • . - Оператор доступа к методу объекта.
  • addRange - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Объект - Экземпляр объекта Range.
      Если область выделения, которой соответствует этот интерфейс Range, имеет видимый контент на Web-странице, то этот контент будет выделен визуально.
      В любом случае эта область выделения будет активирована.
      Если браузер не поддерживает несколько областей выделения контента на Web-странице, то методом addRange можно добавить и активировать только одну область выделения, однако, если, при последующем добавлении, старая и новая области выделения будут иметь пересечения, то они объединятся в одну.
      В противном случае, новая область не будет добавлена и активирована, и добавить и активировать её можно только после вызова метода removeAllRanges.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  collapse - Свёртывает выделение в заданную точку.
  Возвращает значение undefined.
  При вызове метода collapse свойство isCollapsed получит значение true.

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.collapse(Узел, Положение)

Значения формата записи:

  collapseToEnd - Свёртывает выделение в конечной точке последней области выделения.
  Возвращает значение undefined.
  При вызове метода collapseToEnd свойство isCollapsed получит значение true.
  Если конечная точка последней области выделения - это текстовый узел, то курсор переместится в конец соответствующего текстового контента.

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.collapseToEnd()

Значения формата записи:

  collapseToStart - Свёртывает выделение в начальной точке первой области выделения.
  Возвращает значение undefined.
  При вызове метода collapseToEnd свойство isCollapsed получит значение true.
  Если начальная точка первой области выделения - это текстовый узел, то курсор переместится в начало соответствующего текстового контента.

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.collapseToStart()

Значения формата записи:

  containsNode - Возвращает значение true если заданный узел входит в выделенный контент, и значение false - в противном случае.

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.containsNode(Узел[, true|false])

Значения формата записи:

  deleteFromDocument - Удаляет выделенный контент из документа.
  Возвращает значение undefined.
  Удаляется весь выделенный контент вместе с соответствующей HTML-разметкой.

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.deleteFromDocument()

Значения формата записи:

  empty - Является алиасом метода removeAllRanges.
  extend - Перемещает конечную точку выделенного контента на месту заданное узлом и положением.
  Возвращает значение undefined.
  Перемещение конечной точки выделения может изменить направление выделения контента.

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.extend(Узел, Положение])

Значения формата записи:

  getRangeAt - Возвращает экземпляр объекта Range - области выделенного контента по ее номеру.

Формат записи в коде скрипта:

  • Экземпляр объекта .getRangeAt(Номер)

Значения формата записи:

  • Экземпляр объекта Selection - Любой операнд значения со значением экземпляра объекта Selection.
  • . - Оператор доступа к методу объекта.
  • getRangeAt - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Номер - Номер области выделенного контента, заданный в любом числовом формате.
      Номер первой области равен 0.
      Если браузер не поддерживает несколько областей выделения контента на Web-странице, то первая область является также и последней.
      Если этот экземпляр объекта Selection является интерфейсом к контенту, выделенному на Web-странице пользователем, то экземпляр объекта Range будет интерфейсом в соответствующей области выделения.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  removeAllRanges - Снимает выделение со всех областей выделенного контента.
  Возвращает значение undefined.
  Все интерфейсы к выделенным областям остаются неизменными и ими можно снова воспользоваться для добавления и активирования выделенных областей.
  Методом removeAllRanges можно удалить невидимые на Web-странице выделения, которые возникают вследствие вызовов метода collapse.

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.removeAllRanges()

Значения формата записи:

  removeRange - Снимает выделение с области выделенного контента, заданной экземпляром объекта Range.
  Возвращает значение undefined.
  Если браузер не поддерживает несколько областей выделения контента на Web-странице, то он не поддерживает и метод removeRange.

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.removeRange(Объект)

Значения формата записи:

  selectAllChildren - Устанавливает выделение контента для всех "дочерних" элементов заданного узла и(или) его внутреннего контента.
  Возвращает значение undefined.

Формат записи в коде скрипта:

  • Экземпляр объекта Selection.selectAllChildren(Узел)

Значения формата записи:

  • Экземпляр объекта Selection - Любой операнд значения со значением экземпляра объекта Selection.
  • . - Оператор доступа к методу объекта.
  • selectAllChildren - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Узел - Экземпляр объекта HTMLElement.
      Если содержимое этого узла, имеет видимый контент на Web-странице, то этот контент будет выделен визуально.
      Предыдущий выделенный контент будет освобождён от выделения и все области выделения деактивированы без предварительного вызова метода removeAllRanges.
      По существу метод selectAllChildren содаёт новую область выделения с границами заданными этим узлом, и, после его вызова, вызов метода getRangeAt(0) вернёт интерфейс Range к этой области выделения.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  setBaseAndExtent - Устанавливает границы выделенного контента.
  Возвращает значение undefined.
  Если заданные границы области выделенного контента логически верны и заданная ими область имеет видимый контент на Web-странице, то этот контент будет выделен визуально (то есть вызов метода setBaseAndExtent равносилен выделению контента пользователем в заданных границах).
  Предыдущий выделенный контент будет освобождён от выделения и все области выделения деактивированы без предварительного вызова метода removeAllRanges.
  По существу метод setBaseAndExtent создаёт новую область выделения с границами заданными этим методом, и, после его вызова, вызов метода getRangeAt(0) вернёт интерфейс Range к этой области выделения.

Формат записи в коде скрипта:
  • Экземпляр объекта Selection.setBaseAndExtent(Начальный узел, Начальное положение, Конечный узел, Конечное положение)

Значения формата записи:

  Если позиция заданная начальным узлом и начальным положением в HTML-коде документа находится после позиции заданной конечным узлом и конечным положением, то вызов метода setBaseAndExtent равносилен выделению контента пользователем слева-направо.
  setPosition - Является алиасом метода collapse.
  Range
  Range - Является интерфейсом к области выделенного контента на Web-странице.
  Область выделенного контента это часть всего выделенного контента, границы которого определяются свойствами anchorNode, anchorOffset, focusNode и focusOffset интерфейса Selection.
  Если браузер не поддерживает несколько областей выделения контента на Web-странице, то границы области выделения совпадают с границами всего выделенного контента.
  Экземпляр доступен:

  1. В выражении:

      new Range()

    где:
  2. С помощью метода createRange объекта HTMLDocument
  3. С помощью метода getRangeAt объекта Selection
  4. С помощью метода cloneRange объекта Range
  Range свойства.
  collapsed - Содержит значение true если начальная и конечная позиции области выбранного контента совпадают, и значение false - в противном случае.
  Значение имеет логический формат.
  Если выделения нет, то свойство collapsed содержит значение true.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.collapsed

Значения формата записи:

  commonAncestorContainer - Содержит ссылку на экземпляр объекта Node - узла, который содержит начальную и конечную позиции области выделенного контента.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.commonAncestorContainer

Значения формата записи:

  endContainer - Содержит ссылку на экземпляр объекта Node - узла, в котором находится конечная позиция области выделенного контента.
  В отличие от свойства anchorNode, конечная позиция области выделения, по ходу следования HTML-кода документа (слева-направо, сверху-вниз, не может находиться перед начальной позицией).
  Если этот узел является элементом тега, то конечная позиция будет находиться в поле этого элемента.
  Если этот узел является текстовым или комментарием, то конечная позиция будет находиться в соответствующем тексте.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.endContainer

Значения формата записи:

  endOffset - Содержит положение конечной позиции области выделенного контента в узле, указанном свойством endContainer.
  Значение имеет числовой формат.
  Если этот узел является элементом тега, то положение конечной позиции в нём указывается номером узла из последовательности узлов сформированных HTML-кодом, который находится в поле этого элемента (не надо забывать про узлы Text и Comment).
  Если этот узел является текстовым или комментарием, то положение конечной позиции указывается номером символа в соответствующем тексте.
  Если область выделения получена методом setBaseAndExtent, то свойство endOffset содержит значение NaN.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.endOffset

Значения формата записи:

  startContainer - Содержит ссылку на экземпляр объекта Node - узла, в котором находится начальная позиция указанной области выделенного контента.
  В отличие от свойства focusNode, начальная позиция области выделения, по ходу следования HTML-кода документа (слева-направо, сверху-вниз, не может находиться после конечной позиции).
  Если этот узел является элементом тега, то начальная позиция будет находиться в поле этого элемента.
  Если этот узел является текстовым или комментарием, то конечная позиция будет находиться в соответствующем тексте.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.startContainer

Значения формата записи:

  startOffset - Содержит положение начальной позиции области выделенного контента в узле, указанном свойством startContainer.
  Значение имеет числовой формат.
  Если этот узел является элементом тега, то положение начальной позиции в нём указывается номером узла из последовательности узлов сформированных HTML-кодом, который находится в поле этого элемента (не надо забывать про узлы Text и Comment).
  Если этот узел является текстовым или комментарием, то положение начальной позиции указывается номером символа в соответствующем тексте.
  Если область выделения получена методом setBaseAndExtent, то свойство startOffset содержит значение NaN.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.startOffset

Значения формата записи:

  Range методы.
  cloneContents - Создает и возвращает экземпляр объекта DocumentFragment из этой области выделенного контента.
  Узлы входящие в область частично войдут полностью в созданный фрагмент документа во избежание некорректности HTML-кода в нём.
  По этой же причине в созданный фрагмент документа могут войти "родительские" узлы для узлов выделенной области.
  При добавлении этого фрагмента в документ надо учитывать то, что может быть продублировано значение атрибута ID для разных элементов тегов.
  Назначение через интерфейсы DOM обработчиков событий для узлов скопированного фрагмента не сохранится.
  Назначение атрибутом onИмя события обработчиков событий для узлов скопированного фрагмента сохранится.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.cloneContents()

Значения формата записи:

  cloneRange - Копирует в память этот экземпляр объекта Range.
  Возвращает ссылку на этот экземпляр объекта Range созданный в памяти.
  Созданный в памяти экземпляр объекта Range это копия, а не ссылка на оригинал, поэтому изменение в оригинале никак не отразятся на этой копии.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.cloneRange()

Значения формата записи:

  collapse - Свёртывает область выделенного контента в заданную точку.
  Возвращает значение undefined.
  При вызове метода collapse свойство collapsed получит значение true.
  Область может быть свёрнута только до её активации методом addRange.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.collapse(true|false)

Значения формата записи:

  compareBoundaryPoints - Сравнивает позиции в HTML-коде заданной области выделенного контента и области указанной этим экземпляром объекта Range.
  Возвращает в числовом формате одно из значений:
  • -1 - Сравниваемая позиция заданной области в HTML-коде документа находится перед сравниваемой позицией указанной этим экземпляром объекта Range.
  • 0 - Сравниваемые позиции совпадают.
  • 1 - Сравниваемая позиция заданной области в HTML-коде документа находится после сравниваемой позиции указанной этим экземпляром объекта Range.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.compareBoundaryPoints(Флаг, Объект)

Значения формата записи:

  comparePoint - Возвращает числовое значение в зависимости от того, как расположена в HTML-коде заданная позиция по отношению к области выделенного контента.
  Одно из значениЙ:
  • -1 - Заданная позиция в HTML-коде документа находится перед этой областью выделения контента.
  • 0 - Заданная позиция в HTML-коде документа находится в этой областью выделения контента.
  • 1 - Заданная позиция в HTML-коде документа находится после этой области выделения контента.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.comparePoint(Узел, Положение)

Значения формата записи:

  createContextualFragment - Создаёт и возвращает экземпляр объекта DocumentFragment по заданному HTML-коду.
  Метод createContextualFragment может быть вызван как до, так и после активации этой области методом addRange.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.createContextualFragment(Код)

Значения формата записи:

  deleteContents - Удаляет контент документа, лежащий в этой области выделенного контента.
  Возвращает значение undefined.
  Удаляется весь выделенный контент вместе с соответствующей HTML-разметкой.
  Контент может быть удалён как до, так и после активации этой области методом addRange.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.deleteContents()

Значения формата записи:

  detach - Очищает DOM от этого экземпляра объекта Range.
  Возвращает значение undefined.
  При создании (new Range(), createRange, cloneRange) новых областей выделения, ранее созданные могут оказываться уже не нужными.
  Метод detach позволяет очистить память от их интерфейсов.
  Метод detach применяется только для не активированных областей выделения.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.detach()

Значения формата записи:

  extractContents - Вырезает HTML-код документа, ограниченный этой областью выделенного контента, и возвращает экземпляр объекта DocumentFragment, созданный на его основе.
  Узлы, входящие в область частично войдут полностью в созданный фрагмент документа во избежание некорректности HTML-кода в нём.
  По этой же причине в созданный фрагмент документа могут войти "родительские" узлы для узлов выделенной области.
  Назначение через интерфейсы DOM обработчиков событий для узлов скопированного фрагмента не сохранится.
  Назначение атрибутом onИмя события обработчиков событий для узлов скопированного фрагмента сохранится.
  Контент может быть вырезан как до, так и после активации этой области методом addRange.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.extractContents()

Значения формата записи:

  getBoundingClientRect - Возвращает ссылку на экземпляр объекта ClientRect для этой области выделенного контента.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.getBoundingClientRect()

Значения формата записи:

  getClientRects - Возвращает ссылку на экземпляр объекта ClientRectList для этой области выделенного контента.
  Если в область выделенного контента входят насколько полей элементов, то каждое из них может занимать какую-то часть общей клиентской области на экране устройства пользователя.
  Поэтому для их получения метод getBoundingClientRect не пригоден, и надо пользоваться методом getClientRects.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.getClientRects()

Значения формата записи:

  insertNode - Вставляет узел в область выделенного контента.
  Возвращает значение undefined.
  Узел вставляется перед начальной позицией (startContainer + startOffset) области выделения и становится startContainer.
  Видимый контент этого узла будет выделен на Web-странице если область выделения активирована методами addRange или setBaseAndExtent.
  Узел может быть вставлен как до, так и после активации этой области методом addRange.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.insertNode(Узел)

Значения формата записи:

  intersectsNode - Возвращает значение true если заданный узел входит в область выделенного контента, и значение false - в противном случае.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.intersectsNode(Узел)

Значения формата записи:

  isPointInRange - Возвращает значение true если заданная позиция входит в область выделенного контента, и значение false - в противном случае.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.isPointInRange(Узел, Положение)

Значения формата записи:

  selectNode - Устанавливает позиции области выделенного контента заданным узлом.
  Возвращает значение undefined.
  Метод selectNode применяется только до активации этой области методом addRange.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.selectNode(Узел)

Значения формата записи:

  selectNodeContents - Устанавливает позиции области выделенного контента контентом заданного узла.
  Возвращает значение undefined.
  Метод selectNodeContents применяется только до активации этой области методом addRange.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.selectNodeContents(Узел)

Значения формата записи:

  setEnd - Устанавливает конечную позицию области выделенного контента.
  Возвращает значение undefined.
  Метод setEnd применяется только до активации этой области методом addRange.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.setEnd(Узел, Положение)

Значения формата записи:

  setEndAfter - Устанавливает конечную позицию области выделенного контента.
  Возвращает значение undefined.
  Метод setEndAfter применяется только до активации этой области методом addRange.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.setEndAfter(Узел)

Значения формата записи:

  • Экземпляр объекта Range - Любой операнд значения со значением экземпляра объекта Range.
  • . - Оператор доступа к методу объекта.
  • setEndAfter - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Узел - Экземпляр объекта Node, после которого установится конечная позиция области выделенного контента.
      Сам этот узел войдёт в эту область выделенного контента.
      Свойство endContainer этой области выделенного контента будет ссылаться на узел, в котором находится заданный узел.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  setEndBefore - Устанавливает конечную позицию области выделенного контента.
  Возвращает значение undefined.
  Метод setEndBefore применяется только до активации этой области методом addRange.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.setEndBefore(Узел)

Значения формата записи:

  • Экземпляр объекта Range - Любой операнд значения со значением экземпляра объекта Range.
  • . - Оператор доступа к методу объекта.
  • setEndBefore - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Узел - Экземпляр объекта Node, перед которым установится конечная позиция области выделенного контента.
      Сам этот узел не войдёт в эту область выделенного контента.
      Свойство endContainer этой области выделенного контента будет ссылаться на узел, в котором находится заданный узел.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  setStart - Устанавливает начальную позицию области выделенного контента.
  Возвращает значение undefined.
  Метод setStart применяется только до активации этой области методом addRange.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.setStart(Узел, Положение)

Значения формата записи:

  setStartAfter - Устанавливает начальную позицию области выделенного контента.
  Возвращает значение undefined.
  Метод setStartAfter применяется только до активации этой области методом addRange.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.setStartAfter(Узел)

Значения формата записи:

  • Экземпляр объекта Range - Любой операнд значения со значением экземпляра объекта Range.
  • . - Оператор доступа к методу объекта.
  • setStartAfter - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Узел - Экземпляр объекта Node, после которого установится начальная позиция области выделенного контента.
      Сам этот узел не войдёт в эту область выделенного контента.
      Свойство endContainer этой области выделенного контента будет ссылаться на узел, в котором находится заданный узел.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  setStartBefore - Устанавливает начальную позицию области выделенного контента.
  Возвращает значение undefined.
  Метод setStartBefore применяется только до активации этой области методом addRange.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.setStartBefore(Узел)

Значения формата записи:

  • Экземпляр объекта Range - Любой операнд значения со значением экземпляра объекта Range.
  • . - Оператор доступа к методу объекта.
  • setStartBefore - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Узел - Экземпляр объекта Node, перед которым установится начальная позиция области выделенного контента.
      Сам этот узел войдёт в эту область выделенного контента.
      Свойство endContainer этой области выделенного контента будет ссылаться на узел, в котором находится заданный узел.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  surroundContents - Вырезает весь контент этой области выделенного контента и вставляет вместо него заданный узел.
  Возвращает пустое значение.
  Если области выделенного контента не является логически цельным HTML-кодом (например в ней отсутствуют необходимые открывающие или закрывающие элементы), то метод surroundContents не работает.
  Метод surroundContents применяется как до, так и после активации этой области методом addRange.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.surroundContents(Узел)

Значения формата записи:

  toString - Преобразует весь контент этой области выделенного контента в строку.
  Возвращает строковое значение.
  Преобразуется только контент узлов входящих в область без HTML-разметки.

Формат записи в коде скрипта:

  • Экземпляр объекта Range.toString()

Значения формата записи:

Сводная таблица методов
Имя метода Объект Фунrционал Возвращаемое значение
addRange Selection Добавляет область выделения к выделенному контенту. undefined
cloneContents Range Создает фрагмент документа из области выделенного контента. Экземпляр объекта DocumentFragment
cloneRange Range Копирует в память экземпляр объекта Range. Экземпляр объекта Range
collapse Selection Свёртывает выделение в заданную точку. undefined
collapse Range Свёртывает область выделенного контента в заданную точку. undefined
collapseToEnd Selection Свёртывает выделение в конечной точке последней области выделения. undefined
collapseToStart Selection Свёртывает выделение в начальной точке первой области выделения. undefined
compareBoundaryPoints Range Сравнивает позиции в HTML-коде даух областей выделенного контента. Числовое значение
comparePoint Range Проверяет как расположена в HTML-коде заданная позиция по отношению к области выделенного контента. Числовое значение
containsNode Selection Проверяет вхождение узла в выделенный контент. Логическое значение
createContextualFragment Range Создаёт фрагмент документа по заданному HTML-коду. Экземпляр объекта DocumentFragment
deleteContents Range Удаляет контент документа лежащий в области выделенного контента. undefined
deleteFromDocument Selection Удаляет выделенный контент из документа. undefined
detach Range Очищает DOM от экземпляра объекта Range. undefined
empty Selection Алиас метода removeAllRanges. undefined
extend Selection Перемещает конечную точку выделенного контента. undefined
extractContents Range Вырезает HTML-код документа ограниченный областью выделенного контента. Экземпляр объекта DocumentFragment
getBoundingClientRect Range Определяет область клиентской части экрана ограниченную областью выделенного контента. Экземпляр объекта ClientRect
getClientRects Range Определяет области клиентской части экрана ограниченные областью выделенного контента. Экземпляр объекта ClientRectList
getRangeAt Selection Находит область выделенного контента по ее номеру. Экземпляр объекта Range
insertNode Range Вставляет узел в область выделенного контента. undefined
intersectsNode Range Проверяет вхождение узла в область выделенного контента. Логическое значение
isPointInRange Range Проверяет вхождение позиции в область выделенного контента. Логическое значение
removeAllRanges Selection Снимает выделение со всех областей выделенного контента. undefined
removeRange Selection Снимает выделение с области выделенного контента. undefined
selectAllChildren Selection Устанавливает выделение контента для всех "дочерних" элементов заданного узла. undefined
selectNode Range Устанавливает позиции области выделенного контента заданным узлом. undefined
selectNodeContents Range Устанавливает позиции области выделенного контента контентом заданного узла. undefined
setBaseAndExtent Selection Устанавливает границы выделенного контента. undefined
setEnd Range Устанавливает конечную позицию области выделенного контента. undefined
setEndAfter Range Устанавливает конечную позицию области выделенного контента. undefined
setEndBefore Range Устанавливает конечную позицию области выделенного контента. undefined
setPosition Selection Алиас метода collapse. undefined
setStart Range Устанавливает начальную позицию области выделенного контента. undefined
setStartAfter Range Устанавливает начальную позицию области выделенного контента. undefined
setStartBefore Range Устанавливает начальную позицию области выделенного контента. undefined
surroundContents Range Вырезает весь контент области выделенного контента и вставляет вместо него заданный узел. Пустое значение
toString Range Преобразует весь контент области выделенного контента в строку. Строковое значение

Сводная таблица свойств
Имя свойства Объект Содержание Тип значения
anchorNode Selection Узел, в котором находится начальная позиция выделенного контента. Экземпляр объекта
anchorOffset Selection Положение начальной позиции выделенного контента в узле. Числовой формат
baseNode Selection Алиас свойства anchorNode. Экземпляр объекта
baseOffset Selection Алиас свойства anchorOffset. Числовой формат
collapsed Range Индикатор совпадения начальной и конечной позиций области выделенного контента. Логический формат
commonAncestorContainer Range Узел, который содержит начальную и конечную позиции области выделенного контента. Экземпляр объекта
endContainer Range Узел, который содержит конечную позицию области выделенного контента. Экземпляр объекта
endOffset Range Положение конечной позиции области выделенного контента в узле. Числовой формат
extentNode Selection Алиас свойства focusNode. Экземпляр объекта
focusNode Selection Узел, в котором находится конечная позиция выделенного контента. Экземпляр объекта
focusOffset Selection Положение конечной позиции выделенного контента в узле. Числовой формат
isCollapsed Selection Индикатор совпадения начальной и конечной позиций выделенного контента. Логический формат
rangeCount Selection Количество областей выделенного контента. Числовой формат
startContainer Range Узел, который содержит начальную позицию области выделенного контента. Экземпляр объекта
startOffset Range Положение начальной позиции области выделенного контента в узле. Числовой формат
type Selection Тип экземпляра объекта (интерфейса) Selection. Строковый формат
Пример.
  Введите слово или фразу для поиска в документе (фраза должна быть в одном текстовом узле).
Другой пример.
  Выделите контент выше в документе и нажмите кнопку.
Код:

<DIV>
  Введите слово или фразу для поиска в документе (<I>фраза должна быть в одном текстовом узле</I>).
</DIV>
<TEXTAREA ID="POSTW" PLACEHOLDER="Введите текст"></TEXTAREA>
<BUTTON ID="STARTW">Начать поиск</BUTTON>
<DIV>
  Выделите контент выше в документе и нажмите кнопку.
</DIV>
<BUTTON ID="NTARTW">Вырезать</BUTTON>
<SCRIPT>
  var ELBODY = document.body;
  var ITERATOR = null;
  var TXTNODE = null;
  var START = null;
  var RANG = null;
  var SEARCH = null;
  var ELC = null;
  var TXTC = document.getElementById("NTARTW");
  var SELC = getSelection();
  var TXTAR = document.getElementById("POSTW");
  var LOOK = document.getElementById("STARTW");
  var I = 0;
  var L = 0;
  var FIN = 0;
  var SX = function(W)
    {
      SEARCH = TXTAR.value.trim();
      L = SEARCH.length;
      TXTAR.value = " ";
      TXTAR.placeHolder = "Поле ввода";
      SELC.removeAllRanges();
      if ( I == 1 )
        {
          RANG.detach();
          ITERATOR.detach();
        }
      I = 1;
      RANG = document.createRange();
      ITERATOR = document.createNodeIterator(ELBODY,4);
      FIN = 0;
      TXTNODE = ITERATOR.nextNode();
      while ( TXTNODE != null )
        {
          if ( TXTNODE.data.includes(SEARCH) )
            {
              START = TXTNODE.data.indexOf(SEARCH);
              FIN = 1;
              RANG.setStart(TXTNODE,START);
              RANG.setEnd(TXTNODE, START+L);
              SELC.addRange(RANG);
              TXTNODE.parentElement.scrollIntoView(true);
              break;
            }
          TXTNODE = ITERATOR.nextNode();
        };
      if ( FIN == 0 )
        {
          alert("Ничего не найдено");
        }
    };
  var SZ = function(W)
    {
        ELC = getSelection();
        ELC.deleteFromDocument();
    };
  LOOK.onclick = SX;
  TXTC.onclick = SZ;

</SCRIPT>