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
There are no inherited properties.
Range.collapsedRead only- Returns a
Booleanindicating whether the range's start and end points are at the same position. Range.commonAncestorContainerRead only- Returns the deepest
Nodethat contains thestartContainerandendContainernodes. Range.endContainerRead only- Returns the
Nodewithin which theRangeends. Range.endOffsetRead only- Returns a number representing where in the
endContainertheRangeends. Range.startContainerRead only- Returns the
Nodewithin which theRangestarts. Range.startOffsetRead only- Returns a number representing where in the
startContainertheRangestarts.
Constructor
Methods
There are no inherited methods.
Range.setStart()- Sets the start position of a
Range. Range.setEnd()- Sets the end position of a
Range. Range.setStartBefore()- Sets the start position of a
Rangerelative to anotherNode. Range.setStartAfter()- Sets the start position of a
Rangerelative to anotherNode. Range.setEndBefore()- Sets the end position of a
Rangerelative to anotherNode. Range.setEndAfter()- Sets the end position of a
Rangerelative to anotherNode. Range.selectNode()- Sets the
Rangeto contain theNodeand its contents. Range.selectNodeContents()- Sets the
Rangeto contain the contents of aNode. Range.collapse()- Collapses the
Rangeto one of its boundary points. Range.cloneContents()- Returns a
DocumentFragmentcopying the nodes of aRange. Range.deleteContents()- Removes the contents of a
Rangefrom theDocument. Range.extractContents()- Moves contents of a
Rangefrom the document tree into aDocumentFragment. Range.insertNode()- Insert a
Nodeat the start of aRange. Range.surroundContents()- Moves content of a
Rangeinto a newNode. Range.compareBoundaryPoints()- Compares the boundary points of the
Rangewith anotherRange. Range.cloneRange()- Returns a
Rangeobject with boundary points identical to the clonedRange. Range.detach()- Releases the
Rangefrom use to improve performance. Range.toString()- Returns the text of the
Range. Range.compareNode()- Returns a constant representing whether the
Nodeis before, after, inside, or surrounding the range. Range.comparePoint()- Returns -1, 0, or 1 indicating whether the point occurs before, inside, or after the
Range. Range.createContextualFragment()- Returns a
DocumentFragmentcreated from a given string of code. Range.getBoundingClientRect()- Returns a
DOMRectobject which bounds the entire contents of theRange; this would be the union of all the rectangles returned byrange.getClientRects(). Range.getClientRects()- Returns a list of
DOMRectobjects that aggregates the results ofElement.getClientRects()for all the elements in theRange. Range.intersectsNode()- Returns a
booleanindicating whether the given node intersects theRange. Range.isPointInRange()- Returns a
booleanindicating whether the given point is in theRange.
Specifications
| Specification | Status | Comment |
|---|---|---|
| DOM The definition of 'Range' in that specification. |
Living Standard | 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 The definition of 'Extensions to Range' in that specification. |
Working Draft | Added the method createContextualFragment(). |
| CSS Object Model (CSSOM) View Module The definition of 'Extensions to Range' in that specification. |
Working Draft | Added the methods getClientRects() and getBoundingClientRect(). |
| Document Object Model (DOM) Level 2 Traversal and Range Specification The definition of 'Range' in that specification. |
Obsolete | Initial specification. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Range | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
4
| IE Full support 9 | Opera Full support 9 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android
Full support
4
| Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Range() constructor | Chrome Full support Yes | Edge Full support ≤18 | Firefox Full support 24 | IE No support No | Opera Full support 15 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 24 | Opera Android Full support 14 | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
cloneContents | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
cloneRange | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
collapse | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
collapsed | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
commonAncestorContainer | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
compareBoundaryPoints | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
compareNode | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
comparePoint | Chrome Full support Yes | Edge Full support 17 | Firefox Full support Yes | IE No support No | Opera Full support 15 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support 14 | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
createContextualFragment | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support 11 | Opera Full support 15 | Safari Full support 9 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support 14 | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
deleteContents | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
detach | Chrome
Full support
Yes
| Edge Full support 12 | Firefox
No support
4 — 15
| IE Full support 9 | Opera Full support 9 | Safari
Full support
Yes
| WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android
No support
4 — 15
| Opera Android Full support Yes | Safari iOS
Full support
Yes
| Samsung Internet Android Full support Yes |
endContainer | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
endOffset | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
extractContents | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
getBoundingClientRect | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 15 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
getClientRects | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 15 | Safari Full support 5 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
insertNode | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
intersectsNode | Chrome Full support Yes | Edge Full support 17 | Firefox Full support 17 | IE No support No | Opera Full support 15 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 19 | Opera Android Full support 14 | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
isPointInRange | Chrome Full support Yes | Edge Full support 15 | Firefox Full support Yes | IE No support No | Opera Full support 15 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support 14 | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
selectNode | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
selectNodeContents | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
setEnd | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
setEndAfter | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
setEndBefore | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
setStart | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
setStartAfter | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
setStartBefore | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
startContainer | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
startOffset | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
surroundContents | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
toString | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- See implementation notes.
- See implementation notes.
