Range

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

* Some parts of this feature may have varying levels of support.

TheRange interface represents a fragment of a document that can contain nodes and parts of text nodes.

A range can be created by using theDocument.createRange() method. Range objects can also be retrieved by using thegetRangeAt() method of theSelection object or thecaretRangeFromPoint() method of theDocument object.

There also is theRange() constructor available.

Instance properties

There are no inherited properties.

Range.collapsedRead only: Returns a boolean value indicating whether the range's start and end points are at the same position.
Range.commonAncestorContainerRead only: Returns the deepestNode that contains thestartContainer andendContainer nodes.
Range.endContainerRead only: Returns theNode within which theRange ends.
Range.endOffsetRead only: Returns a number representing where in theendContainer theRange ends.
Range.startContainerRead only: Returns theNode within which theRange starts.
Range.startOffsetRead only: Returns a number representing where in thestartContainer theRange starts.

Constructor

Range(): Returns aRange object with the globalDocument as its start and end.

Instance methods

There are no inherited methods.

Range.collapse(): Collapses theRange to one of its boundary points.
Range.compareBoundaryPoints(): Compares the boundary points of theRange with anotherRange.
Range.compareNode()Deprecated Non-standard: Returns a constant representing whether the Node is before, after, inside, or surrounding the range.
Range.comparePoint(): Returns -1, 0, or 1 indicating whether the point occurs before, inside, or after theRange.
Range.cloneContents(): Returns aDocumentFragment copying the nodes of aRange.
Range.cloneRange(): Returns aRange object with boundary points identical to the clonedRange.
Range.createContextualFragment(): Returns aDocumentFragment created from a given string of code.
Range.deleteContents(): Removes the contents of aRange from theDocument.
Range.detach(): Does nothing. Kept for compatibility.
Range.extractContents(): Moves contents of aRange from the document tree into aDocumentFragment.
Range.getBoundingClientRect(): Returns aDOMRect object which bounds the entire contents of theRange; this would be the union of all the rectangles returned byrange.getClientRects().
Range.getClientRects(): Returns a list ofDOMRect objects that aggregates the results ofElement.getClientRects() for all the elements in theRange.
Range.isPointInRange(): Returns aboolean indicating whether the given point is in theRange.
Range.insertNode(): Insert aNode at the start of aRange.
Range.intersectsNode(): Returns aboolean indicating whether the given node intersects theRange.
Range.selectNode(): Sets theRange to contain theNode and its contents.
Range.selectNodeContents(): Sets theRange to contain the contents of aNode.
Range.setEnd(): Sets the end position of aRange.
Range.setStart(): Sets the start position of aRange.
Range.setEndAfter(): Sets the end position of aRange relative to anotherNode.
Range.setEndBefore(): Sets the end position of aRange relative to anotherNode.
Range.setStartAfter(): Sets the start position of aRange relative to anotherNode.
Range.setStartBefore(): Sets the start position of aRange relative to anotherNode.
Range.surroundContents(): Moves content of aRange into a newNode.
Range.toString(): Returns the text of theRange.