Range — Интерфейсы веб API

Range(диапазон) интерфейс предоставляет фрагмент документа который может содержать узлы и части текстовых узлов данного документа.

Range может быть создан с помощью метода createRange, у объекта Document. Или объект Range можно получить с помощью метода getRangeAt, у объекта Selection. А также с помощью конструктора Range() (en-US).

Нет унаследованных свойств.

Range.collapsed Только для чтения Возвращает Boolean (en-US) указывающий, находятся ли начало и конец диапазона на одной и той же позиции.

Range.startContainer (en-US) Только для чтения

Возвращает Node внутри которого Range начинается.

Range.endContainer (en-US) Только для чтения

Возвращает Node внутри которого Range заканчивается .

Range.commonAncestorContainer (en-US) Только для чтения

Возвращает самый глубокий Node который содержит узлы startContainer и endContainer.

Range.endOffset (en-US) Только для чтения

Возвращает число равное расположению endContainer в Range .

Range.startOffset (en-US) Только для чтения

Returns a number representing where in the startContainer the

Range starts.

Range() (en-US) Экспериментальная возможность

Возвращают объект Range с глобальным Document как начало и конец.

Не имеют унаследованных свойств.

Range.setStart() (en-US)

Назначают начальную позицию Range.

Range.setEnd() (en-US)

Назначает конечную позицию Range

.

Range.setStartBefore() (en-US)

Устанавливает начальную позицию Range относительно другого Node пред ним.

Range.setStartAfter() (en-US)

Устанавливает начальную позицию Range относительно другого Node после него.

Range.setEndBefore() (en-US)

Устанавливает конечную позицию Range относительно другого Node перед ним.

Range.setEndAfter() (en-US)

Устанавливает конечную позицию Range относительно другого Node после него.

Range.selectNode() (en-US)

Выбирает Range to содержащий Node и его контент.

Range.selectNodeContents() (en-US)

Выбирает Range содержащий контент Node.

Range.collapse() (en-US)

Схлопывает Range до одной из граничных точек.

Range.cloneContents() (en-US)

Возвращает DocumentFragment содержащийся в узле Range.

Range.deleteContents() (en-US)

Удаляет содержимое Range изDocument.

Переносит содержимое Range из дерева документа в DocumentFragment.

Range.insertNode() (en-US)

Вставляет a Node в начало Range.

Range.surroundContents()

Переносит содержимое Range в новый Node.

Range.compareBoundaryPoints() (en-US)

Сравнивает граничные точки Range с другим Range.

Range.cloneRange() (en-US)

Возвращает объект из Range с граничными точками идентичными клонированному Range.

Range.detach() (en-US)

Освобождает Range от использования для улучшения производительности .

Range.toString() (en-US)

Возвращает текст в

Range.

Range.compareNode() (en-US) Non-standard

Возвращает константу, представляющую, находится ли Node до, после, внутри или вокруг range.

Range.comparePoint() (en-US) Экспериментальная возможность

Возвращает -1, 0, или 1 в зависимости от того, находиться ли referenceNode перед, внутри, или после

Range.

Range.createContextualFragment() (en-US) Экспериментальная возможность

Возвращает DocumentFragment созданный из полученной строки с кодом.

Range.getBoundingClientRect() Экспериментальная возможность

Возвращает объект ClientRect object which bounds the entire contents of the Range

; this would be the union of all the rectangles returned by range. getClientRects() (en-US).

Range.getClientRects() (en-US) Экспериментальная возможность

Returns a list of ClientRect objects that aggregates the results of Element.getClientRects() (en-US) for all the elements in the Range.

Range.intersectsNode()
(en-US) Экспериментальная возможность

Возвращает boolean указывающий, пересекает ли данный узел Range.

Range.isPointInRange() (en-US) Экспериментальная возможность

Returns a boolean indicating whether the given point is in the Range.

SpecificationStatusComment
DOM
Определение ‘Range’ в этой спецификации.		Живой стандартDo not use RangeException anymore, use DOMException instead. Made the second parameter of collapse() optional. Added the methods isPointInRange(), comparePoint(), and intersectsNode(). Added the constructor Range().
DOM Parsing and Serialization
Определение ‘Extensions to Range’ в этой спецификации.		Рабочий черновикAdded the method createContextualFragment()
.
CSS Object Model (CSSOM) View Module
Определение ‘Extensions to Range’ в этой спецификации.		Рабочий черновикAdded the methods getClientRects() and getBoundingClientRect().
Document Object Model (DOM) Level 2 Traversal and Range Specification
Определение ‘Range’ в этой спецификации.		УстаревшаяInitial specification.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • The DOM interfaces index

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Диапазон

— веб-API | MDN

Интерфейс Диапазон представляет собой фрагмент документа, который может содержать узлы и части текстовых узлов.

Диапазон можно создать с помощью метода Document. createRange() . Объекты Range также можно получить с помощью метода getRangeAt() объекта Selection или метода caretRangeFromPoint() объекта Document .

Также есть Доступен конструктор Range() .

АннотацияДиапазон Диапазон

Нет унаследованных свойств.

Range.collapsed Только чтение

Возвращает логическое значение, указывающее, находятся ли начальная и конечная точки диапазона в одном и том же месте.

Range.commonAncestorContainer Только чтение

Возвращает самый глубокий узел , который содержит startContainer и endContainer узлов.

Range.endContainer Только чтение

Возвращает узел , в котором заканчивается диапазон .

Range.endOffset Только чтение

Возвращает число, представляющее, где в endContainer заканчивается диапазон .

Range.startContainer Только чтение

Возвращает узел , в котором начинается диапазон .

Range.startOffset Только чтение

Возвращает число, представляющее, где в startContainer начинается диапазон .

Диапазон()

Возвращает объект Range с глобальным Document в качестве начала и конца.

Унаследованных методов нет.

Range.collapse()

Сворачивает диапазон до одной из его граничных точек.

Диапазон.compareBoundaryPoints()

Сравнивает граничные точки диапазона с другим диапазоном .

Range.compareNode() Устаревший Нестандартный

Возвращает константу, указывающую, находится ли узел до, после, внутри или вокруг диапазона.

Диапазон.comparePoint()

Возвращает -1, 0 или 1, указывающее, находится ли точка до, внутри или после диапазона .

Range.cloneContents()

Возвращает DocumentFragment , копирующий узлы диапазона .

Диапазон.cloneRange()

Возвращает объект Range с граничными точками, идентичными клонированному Range .

Range.createContextualFragment()

Возвращает DocumentFragment , созданный из заданной строки кода.

Диапазон.deleteContents()

Удаляет содержимое диапазона из документа .

Диапазон.detach()

Ничего не делает. Сохранено для совместимости.

Перемещает содержимое диапазона из дерева документов в DocumentFragment .

Range.getBoundingClientRect()

Возвращает объект DOMRect , ограничивающий все содержимое диапазона ; это будет объединение всех прямоугольников, возвращаемых диапазон.getClientRects() .

Диапазон.getClientRects()

Возвращает список из объектов DOMRect , который объединяет результаты Element.getClientRects() для всех элементов в диапазоне .

Диапазон. isPointInRange()

Возвращает логическое значение , указывающее, находится ли данная точка в диапазоне .

Диапазон.insertNode()

Вставить узел в начало диапазона .

Диапазон.intersectsNode()

Возвращает логическое значение , указывающее, пересекает ли данный узел диапазон .

Диапазон.selectNode()

Устанавливает диапазон для содержания узла и его содержимого.

Range.selectNodeContents()

Устанавливает диапазон для содержания содержимого узла .

Диапазон.setEnd()

Устанавливает конечное положение диапазона .

Диапазон. setStart()

Устанавливает начальную позицию диапазона .

Диапазон.setEndAfter()

Устанавливает конечное положение диапазона относительно другого узла .

Диапазон.setEndBefore()

Устанавливает конечное положение диапазона относительно другого узла .

Диапазон.setStartAfter()

Устанавливает начальную позицию диапазона относительно другого узла .

Диапазон.setStartBefore()

Устанавливает начальную позицию диапазона относительно другого узла .

Range.surroundContents()

Перемещает содержимое диапазона в новый узел .

Диапазон.toString()

Возвращает текст диапазона .

Спецификация
DOM Standard
# interface-range
DOM Parsing and Serialization
# extensions-to-the-range-interface
CSSOM View Module
# extensions-to-the-range -interface

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

  • Индекс интерфейсов DOM

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

Как выбрать диапазон из массива в JavaScript | by Dr. Derek Austin 🥳

Нужно получить ряд элементов в массиве? Вот как использовать

Array.prototype.slice() , что похоже на String.prototype.substring() для массивов. Фото Kaizen Nguyễn на Unsplash

Если вы читали мою статью о подстроках JavaScript, то знаете, что я предпочитаю синтаксис Ruby JS из-за оператора диапазона Ruby .. :

Как выбрать диапазон из строки (a Substring) в JavaScript

Здесь нет удобного ярлыка. Чтобы получить подстроку, используйте встроенный метод String.prototype.substring(startIndex…

medium.com

Возможно, неудивительно, что я хотел бы использовать синтаксис диапазона Ruby для выбора диапазона внутри массива — это так удобно!

В Ruby ["🏄","🏊","🌴","🍹","🌞"][2. .3] равно ["🌴","🍹"] .

В JavaScript нам нужно использовать Array.prototype.slice() . Вот как.

«Метод slice() возвращает неглубокую копию части массива в новый объект массива, выбранный из begin to конец ( конец не включен), где начало и конец представляют индекс элементов в этом массиве. Исходный массив не будет изменен». — MDN Docs

В JavaScript ["🏄", "🏊", "🌴", "🍹", "🌞"].slice(2,4) создаст нашу пляжную пару смайликов, [" 🌴","🍹"] .

Обратите внимание, что конечный элемент индекса не включен, поэтому вам нужно добавить его в индекс по сравнению с тем, как работает метод диапазона Ruby.

Если вы не включаете конечный индекс, вы получаете оставшуюся часть массива, поэтому ["🏄","🏊","🌴","🍹","🌞"].slice(2) приводит к ["🌴","🍹","🌞"] .

Вы также можете использовать отрицательные индексы, которые отсчитываются от конца массива в обратном порядке: ["🏄","🏊","🌴","🍹","🌞"].slice(-2) возвращает ["🍹","🌞"] .

Любой индекс, указанный в slice() , может быть положительным, нулевым или отрицательным:
["🏄","🏊","🌴","🍹","🌞"].slice(-4,3 ) дает ["🏊","🌴"] .

Аналогично, ["🏄","🏊","🌴","🍹","🌞"].slice(2,-1) это ["🌴","🍹"] .

Вот забавный факт — slice() фактически можно использовать таким же образом для строк, и в этом случае он работает точно так же, как substring() .

(Одно отличие состоит в том, что slice() принимает отрицательные индексы; substring() — нет.)

Еще одно распространенное использование slice() — поверхностное копирование массивов, которое я сравниваю с методами глубокого копирования массивов. в следующей статье:

Как глубоко копировать объекты и массивы в JavaScript

Обычные методы копирования объекта или массива делают лишь поверхностную копию, поэтому глубоко вложенные ссылки представляют собой проблему… Метод

, slice() не изменяет исходный массив.

No related posts.