Object: Range
The Range object represents a range of content between two boundary points, a start point and an end point, in a Document, DocumentFragment, or Attr node.
You can create a Range object by using Document.createRange. You can retrieve a Range object by using Selection.getRangeAt.
Range properties
Property name |
Type |
Description |
Status |
Availability |
|---|---|---|---|---|
collapsed |
boolean |
Returns true if the start point and end point of the range are the same. |
read-only |
4.7.1 or later |
commonAncestorContainer |
Returns the deepest node that contains the startContainer and endContainer nodes. |
read-only |
4.7.1 or later |
|
endContainer |
Returns the node that contains the end point of the range. |
read-only |
4.7.1 or later |
|
endOffset |
int |
Returns a number that represents the end point of the range within the endContainer node. |
read-only |
4.7.1 or later |
startContainer |
Returns the node that contains the start point of the range. |
read-only |
4.7.1 or later |
|
startOffset |
int |
Returns a number that represents the start point of the range within the startContainer node. |
read-only |
4.7.1 or later |
Range methods
Method name |
Description |
Availability |
|---|---|---|
Duplicates the contents of a specified range. |
4.7.1 or later |
|
Creates a new Range object with the same start point and end point as the specified range. |
4.7.1 or later |
|
Collapses a range onto its start point or end point. |
4.7.1 or later |
|
Compares the start points and end points of two ranges. |
4.7.1 or later |
|
Deletes the contents of the range from the Document or DocumentFragment node. |
4.7.1 or later |
|
Immediately releases the Range object from the object model. |
4.7.1 or later |
|
Extracts the entire contents of the range from a Document or DocumentFragment node and moves it to a new DocumentFragment object. |
4.7.1 or later |
|
Inserts a new node at the start of the range. |
4.7.1 or later |
|
Populates the range with a specified node and its contents. |
4.7.1 or later |
|
Populates the range with the contents of a specified node. |
4.7.1 or later |
|
Sets the end point of the range. |
4.7.1 or later |
|
Sets the end point of a range at a position that is after the specified node. |
4.7.1 or later |
|
Sets the end point of a range at a position that is before the specified node. |
4.7.1 or later |
|
Sets the start point of the range. |
4.7.1 or later |
|
Sets the start point of a range at a position that is after the specified node. |
4.7.1 or later |
|
Sets the start point of a range at a position that is before the specified node. |
4.7.1 or later |
|
Moves the contents of the range to a new node object, and inserts the new node at the start point of the range. |
4.7.1 or later |
|
| Returns the contents of the range as a string. |
4.7.1 or later |
Method: Range.cloneContents()
Return values
This method returns a DocumentFragment object that contains the same contents as the range.
Exceptions
Exception |
Description |
|---|---|
HIERARCHY_REQUEST_ERR |
Thrown if the result of this action is that a DocumentType node is inserted into the DocumentFragment object. |
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
Method: Range.cloneRange()
The cloneRange() method creates a new Range object with the same start point and end point as the specified range.
Exceptions
Exception |
Description |
|---|---|
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
Method: Range.collapse()
Exceptions
Exception |
Description |
|---|---|
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
Method: Range.compareBoundaryPoints()
Parameters
Return values
This method returns one of the following values:
- -1: Indicates that the specified start point or end point of the current range is before the corresponding start point or end point of sourceRange.
- 0: Indicates that the specified start point or end point of the given range is identical to the corresponding start point or end point of sourceRange.
- 1: Indicates that the specified start point or end point of the given range is after the corresponding start point or end point of sourceRange.
Exceptions
Exception |
Description |
|---|---|
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
WRONG_DOCUMENT_ERR |
Thrown if the current range and sourceRange are not in the same Document or DocumentFragment node. |
Method: Range.deleteContents()
The deleteContents() method deletes the contents of the range from the Document or DocumentFragment node.
Exceptions
Exception |
Description |
|---|---|
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
NO_MODIFICATION_ALLOWED_ERR |
Thrown if any portion of the contents of the range is read-only, or if any of the nodes that contain any of the contents of the range is read-only. |
Method: Range.detach()
The detach() method immediately releases the Range object from the object model. Although it is permissible to just stop using a Range object when you are finished with it, the browser will continue to expend some resources maintaining it. Detaching a Range object informs the browser that it can release those resources, making them available to other objects. As a result, it is a good practice to invoke the Range.detach() method whenever a range is no longer needed.
Once a Range object is detached, any attempts to access it will result in an exception.
Method: Range.extractContents()
The extractContents() method extracts the entire contents of the range from a Document or DocumentFragment node and moves it to a new DocumentFragment object.
Return values
This method returns a new DocumentFragment object that contains the extracted range contents.
Exceptions
Exception |
Description |
|---|---|
HIERARCHY_REQUEST_ERR |
Thrown if this action would result in a DocumentType node being inserted into the DocumentFragment object. |
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
NO_MODIFICATION_ALLOWED_ERR |
Thrown if any portion of the contents of the range is read-only, or if any of the Node objects that contain any of the contents of the range is read-only. |
Method: Range.insertNode()
The insertNode() method inserts a new node at the start of the range.
If the container is a Text node, the node is split (as if the Text.splitText method had been invoked), and the new node is inserted between the resulting pair of Text nodes.
Parameters
Parameter |
Type |
Description |
|---|---|---|
newNode |
Specifies the new node to insert. If newNode is a DocumentFragment node, only the child nodes will be inserted, not the DocumentFragment node itself. |
Exceptions
Exception |
Description |
|---|---|
HIERARCHY_REQUEST_ERR |
Thrown if this action would result in a DocumentType node being inserted into the DocumentFragment object. |
INVALID_NODE_TYPE_ERR |
Thrown if newNode is an Attr, Entity, Notation, or Document node. |
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
NO_MODIFICATION_ALLOWED_ERR |
Thrown if any portion of the contents of the range is read-only, or if any of the Node objects that contain any of the contents of the range is read-only. |
WRONG_DOCUMENT_ERR |
Thrown if newNode and the container of the start of the range were not created from the same document. |
Method: Range.selectNodeContents()
Parameters
Exceptions
Exception |
Description |
|---|---|
INVALID_NODE_TYPE_ERR |
Thrown if refNode or an ancestor of refNode is an Attr, Entity, Notation, or Document node. |
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
Method: Range.selectNode()
Parameters
Exceptions
Exception |
Description |
|---|---|
INVALID_NODE_TYPE_ERR |
Thrown if an ancestor of refNode is an Entity, Notation or DocumentType node, or if refNode is an Attr, Document, DocumentFragment, Entity, or Notation node. |
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
Method: Range.setEndAfter()
The setEndAfter() method sets the end point of a range at a position that is after the specified node.
Parameters
Exceptions
Exception |
Description |
|---|---|
INVALID_NODE_TYPE_ERR |
Thrown if the root container of refNode is not an Attr, Document, or DocumentFragment node, or if refNode is an Attr, Document, DocumentFragment, Entity, or Notation node. |
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
Method: Range.setEndBefore()
The setEndBefore() method sets the end point of a range at a position that is before the specified node.
Parameters
Exceptions
Exception |
Description |
|---|---|
INVALID_NODE_TYPE_ERR |
Thrown if the root container of refNode is not an Attr, Document, or DocumentFragment node, or if refNode is an Attr, Document, DocumentFragment, Entity, or Notation node. |
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
Method: Range.setEnd()
Parameters
Exceptions
Exception |
Description |
|---|---|
INDEX_SIZE_ERR |
Thrown if endOffset is greater than the number of child units in endNode. For CharacterData nodes (such as Text or Comment nodes) or ProcessingInstruction nodes, child units are 16-bit units. For all other nodes, child units are child nodes. |
INVALID_NODE_TYPE_ERR |
Thrown if endNode or an ancestor of endNode is an Entity, Notation, or DocumentType node. |
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
Method: Range.setStartAfter()
The setStartAfter() method sets the start point of a range at a position that is after the specified node.
Parameters
Exceptions
Exception |
Description |
|---|---|
INVALID_NODE_TYPE_ERR |
Thrown if the root container of refNode is not an Attr, Document, or DocumentFragment node, or if refNode is an Attr, Document, DocumentFragment, Entity, or Notation node. |
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
Method: Range.setStartBefore()
The setStartBefore() method sets the start point of a range at a position that is before the specified node.
Parameters
Exceptions
Exception |
Description |
|---|---|
INVALID_NODE_TYPE_ERR |
Thrown if the root container of refNode is not an Attr, Document, or DocumentFragment node, or if refNode is an Attr, Document, DocumentFragment, Entity, or Notation node. |
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
Method: Range.setStart()
Parameters
Exceptions
Exception |
Description |
|---|---|
INDEX_SIZE_ERR |
Thrown if startOffset is greater than the number of child units in startNode. For CharacterData nodes (such as Text or Comment nodes) or ProcessingInstruction nodes, child units are 16-bit units. For all other nodes, child units are child nodes. |
INVALID_NODE_TYPE_ERR |
Thrown if startNode or an ancestor of startNode is an Entity, Notation, or DocumentType node. |
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
Method: Range.surroundContents()
The surroundContents() method moves the contents of the range to a new node object, and inserts the new node at the start point of the range.
Parameters
Exceptions
Exception |
Description |
|---|---|
BAD_BOUNDARYPOINTS_ERR |
Thrown if the range partially selects a non-text node. |
HIERARCHY_REQUEST_ERR |
Thrown if: |
INVALID_NODE_TYPE_ERR |
Thrown if newNode is an Attr, Document, DocumentFragment, DocumentType, Entity, or Notation node. |
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |
NO_MODIFICATION_ALLOWED_ERR |
Thrown if an ancestor container of either start point or the end point of the range is read-only. |
WRONG_DOCUMENT_ERR |
Thrown if newNode and the container of the start point of the range are not created from the same document. |
Method: Range.toString()
Exceptions
Exception |
Description |
|---|---|
INVALID_STATE_ERR |
Thrown if the Range.detach() method is already invoked on the Range object. |