AwaitedDOM/ Range

The Range interface represents a fragment of a document that can contain nodes and parts of text nodes.
A range can be created by using the Document.createRange() method. Range objects can also be retrieved by using the getRangeAt() method of the Selection object or the caretRangeFromPoint() method of the Document object.
There also is the Range() constructor available.

Properties

.commonAncestorContainer
W3C

Returns the deepest Node that contains the startContainer and endContainer nodes.

Type: SuperNode

.collapsed
W3C

A Boolean value which is true if the range is collapsed. A collapsed range is one whose start position and end position are the same, resulting in a zero-character-long range.

Type: Promise<boolean>

.endContainer
W3C

The DOM Node in which the end of the range, as specified by the endOffset property, is located.

Type: SuperNode

.endOffset
W3C

An integer value indicating the offset, in characters, from the beginning of the node's contents to the beginning of the range represented by the range object. This value must be less than the length of the endContainer node.

Type: Promise<number>

.startContainer
W3C

The DOM Node in which the beginning of the range, as specified by the startOffset property, is located.

Type: SuperNode

.startOffset
W3C

An integer value indicating the offset, in characters, from the beginning of the node's contents to the last character of the contents referred to  by the range object. This value must be less than the length of the node indicated in startContainer.

Type: Promise<number>

Methods

.cloneContents()
W3C

Returns a DocumentFragment copying the nodes of a Range.

Returns: DocumentFragment

.cloneRange()
W3C

Returns a Range object with boundary points identical to the cloned Range.

Returns: Range

.collapse(toStart?)
W3C

Collapses the Range to one of its boundary points.

Arguments:

  • toStart boolean. A boolean value: true collapses the Range to its start, false to its end. If omitted, it defaults to false.

Returns: Promise<void>

.compareBoundaryPoints(how, sourceRange)
W3C

Compares the boundary points of the Range with another Range.

Arguments:

  • how number. A constant describing the comparison method:
    • Range.END_TO_END compares the end boundary-point of *sourceRange* to the end boundary-point of Range.
    • Range.END_TO_START compares the end boundary-point of *sourceRange* to the start boundary-point of Range.
    • Range.START_TO_END compares the start boundary-point of *sourceRange* to the end boundary-point of Range.
    • Range.START_TO_START compares the start boundary-point of *sourceRange* to the start boundary-point of Range.

    If the value of the parameter is invalid, a DOMException with a NotSupportedError code is thrown.

  • sourceRange Range. A Range to compare boundary points with the range.

Returns: Promise<number>

.comparePoint(node, offset)
W3C

Returns -1, 0, or 1 indicating whether the point occurs before, inside, or after the Range.

Arguments:

  • node Node. The Node to compare with the Range.
  • offset number. An integer greater than or equal to zero representing the offset inside the referenceNode.

Returns: Promise<number>

.createContextualFragment(fragment)
W3C

Returns a DocumentFragment created from a given string of code.

Arguments:

  • fragment string. Text that contains text and tags to be converted to a document fragment.

Returns: DocumentFragment

.deleteContents()
W3C

Removes the contents of a Range from the Document.

Returns: Promise<void>

.detach()
W3C

Releases the Range from use to improve performance.

Returns: Promise<void>

.extractContents()
W3C

Moves contents of a Range from the document tree into a DocumentFragment.

Returns: DocumentFragment

.getBoundingClientRect()
W3C

Returns a DOMRect object which bounds the entire contents of the Range; this would be the union of all the rectangles returned by range.getClientRects().

Returns: DOMRect

.getClientRects()
W3C

Returns a list of DOMRect objects that aggregates the results of Element.getClientRects() for all the elements in the Range.

Returns: DOMRectList

.insertNode(node)
W3C

Insert a Node at the start of a Range.

Arguments:

  • node Node. The Node to insert at the start of the range.

Returns: Promise<void>

.intersectsNode(node)
W3C

Returns a boolean indicating whether the given node intersects the Range.

Arguments:

  • node Node. The Node to compare with the Range.

Returns: Promise<boolean>

.isPointInRange(node, offset)
W3C

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

Arguments:

  • node Node. The Node to compare with the Range.
  • offset number. The offset into Node of the point to compare with the Range.

Returns: Promise<boolean>

.selectNode(node)
W3C

Sets the Range to contain the Node and its contents.

Arguments:

  • node Node. The Node to select within a Range.

Returns: Promise<void>

.selectNodeContents(node)
W3C

Sets the Range to contain the contents of a Node.

Arguments:

  • node Node. The Node whose contents will be selected within a Range.

Returns: Promise<void>

.setEnd(node, offset)
W3C

Sets the end position of a Range.

Arguments:

  • node Node. The Node inside which the Range should end.
  • offset number. An integer greater than or equal to zero representing the offset for the end of the Range from the start of endNode.

Returns: Promise<void>

.setEndAfter(node)
W3C

Sets the end position of a Range relative to another Node.

Arguments:

  • node Node. The Node to end the Range after.

Returns: Promise<void>

.setEndBefore(node)
W3C

Sets the end position of a Range relative to another Node.

Arguments:

  • node Node. The Node to end the Range before.

Returns: Promise<void>

.setStart(node, offset)
W3C

Sets the start position of a Range.

Arguments:

  • node Node. The Node where the Range should start.
  • offset number. An integer greater than or equal to zero representing the offset for the start of the Range from the start of startNode.

Returns: Promise<void>

.setStartAfter(node)
W3C

Sets the start position of a Range relative to another Node.

Arguments:

  • node Node. The Node to start the Range after.

Returns: Promise<void>

.setStartBefore(node)
W3C

Sets the start position of a Range relative to another Node.

Arguments:

  • node Node. The Node before which the Range should start.

Returns: Promise<void>

.surroundContents(newParent)
W3C

Moves content of a Range into a new Node.

Arguments:

  • newParent Node. A Node with which to surround the contents.

Returns: Promise<void>

.toString()
W3C

Returns the text of the Range.

Returns: Promise<string>

Edit this page on GitHub