We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

A range can be created using the createRange() method of the Document object. 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.collapsed Read only
Returns a Boolean indicating whether the range's start and end points are at the same position.
Range.commonAncestorContainer Read only
Returns the deepest Node that contains the startContainer and endContainer nodes.
Range.endContainer Read only
Returns the Node within which the Range ends.
Range.endOffset Read only
Returns a number representing where in the endContainer the Range ends.
Range.startContainer Read only
Returns the Node within which the Range starts.
Range.startOffset Read only
Returns a number representing where in the startContainer the Range starts.

Constructor

Range()
Returns a Range object with the global Document as its start and end.

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 Range relative to another Node.
Range.setStartAfter()
Sets the start position of a Range relative to another Node.
Range.setEndBefore()
Sets the end position of a Range relative to another Node.
Range.setEndAfter()
Sets the end position of a Range relative to another Node.
Range.selectNode()
Sets the Range to contain the Node and its contents.
Range.selectNodeContents()
Sets the Range to contain the contents of a Node.
Range.collapse()
Collapses the Range to one of its boundary points.
Range.cloneContents()
Returns a DocumentFragment copying the nodes of a Range.
Range.deleteContents()
Removes the contents of a Range from the Document.
Range.extractContents()
Moves contents of a Range from the document tree into a DocumentFragment.
Range.insertNode()
Insert a Node at the start of a Range.
Range.surroundContents()
Moves content of a Range into a new Node.
Range.compareBoundaryPoints()
Compares the boundary points of the Range with another Range.
Range.cloneRange()
Returns a Range object with boundary points identical to the cloned Range.
Range.detach()
Releases the Range from use to improve performance.
Range.toString()
Returns the text of the Range.
Range.compareNode()
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 the Range.
Range.createContextualFragment()
Returns a DocumentFragment created from a given string of code.
Range.getBoundingClientRect()
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().
Range.getClientRects()
Returns a list of DOMRect objects that aggregates the results of Element.getClientRects() for all the elements in the Range.
Range.intersectsNode()
Returns a boolean indicating whether the given node intersects the Range.
Range.isPointInRange()
Returns a boolean indicating whether the given point is in the Range.

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes4199 Yes
Range() constructor Yes Yes24 No15 Yes
cloneContents Yes Yes499 Yes
cloneRange Yes Yes499 Yes
collapse Yes Yes499 Yes
collapsed Yes Yes499 Yes
commonAncestorContainer Yes Yes499 Yes
compareBoundaryPoints Yes Yes499 Yes
compareNode No ?1 — 3 No No No
comparePoint Yes ? Yes No15 ?
createContextualFragment Yes ? Yes11159
deleteContents Yes Yes499 Yes
detach Yes2 Yes4 — 15399 Yes4
endContainer Yes Yes499 Yes
endOffset Yes Yes499 Yes
extractContents Yes Yes499 Yes
getBoundingClientRect Yes Yes4915 ?
getClientRects Yes Yes49155
insertNode Yes Yes299 Yes
intersectsNode Yes Yes17 No15 ?
isPointInRange Yes Yes Yes No15 ?
selectNode Yes Yes499 Yes
selectNodeContents Yes Yes499 Yes
setEnd Yes Yes499 Yes
setEndAfter Yes Yes499 Yes
setEndBefore Yes Yes499 Yes
setStart Yes Yes499 Yes
setStartAfter Yes Yes499 Yes
setStartBefore Yes Yes499 Yes
startContainer Yes Yes499 Yes
startOffset Yes Yes499 Yes
surroundContents Yes Yes499 Yes
toString Yes Yes499 Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes41 Yes Yes ?
Range() constructor Yes Yes Yes2415 Yes ?
cloneContents Yes Yes Yes4 Yes Yes ?
cloneRange Yes Yes Yes4 Yes Yes ?
collapse Yes Yes Yes4 Yes Yes ?
collapsed Yes Yes Yes4 Yes Yes ?
commonAncestorContainer Yes Yes Yes4 Yes Yes ?
compareBoundaryPoints Yes Yes Yes4 Yes Yes ?
compareNode No No ? No No No ?
comparePoint Yes Yes ? Yes15 ? ?
createContextualFragment Yes Yes ? Yes15 ? ?
deleteContents Yes Yes Yes4 Yes Yes ?
detach Yes Yes Yes4 — 153 Yes Yes4 ?
endContainer Yes Yes Yes4 Yes Yes ?
endOffset Yes Yes Yes4 Yes Yes ?
extractContents Yes Yes Yes4 Yes Yes ?
getBoundingClientRect Yes Yes Yes415 ? ?
getClientRects Yes Yes Yes415 ? ?
insertNode Yes Yes Yes49 Yes ?
intersectsNode Yes Yes Yes1915 ? ?
isPointInRange Yes Yes Yes Yes15 ? ?
selectNode Yes Yes Yes4 Yes Yes ?
selectNodeContents Yes Yes Yes4 Yes Yes ?
setEnd Yes Yes Yes4 Yes Yes ?
setEndAfter Yes Yes Yes4 Yes Yes ?
setEndBefore Yes Yes Yes4 Yes Yes ?
setStart Yes Yes Yes4 Yes Yes ?
setStartAfter Yes Yes Yes4 Yes Yes ?
setStartBefore Yes Yes Yes4 Yes Yes ?
startContainer Yes Yes Yes4 Yes Yes ?
startOffset Yes Yes Yes4 Yes Yes ?
surroundContents Yes Yes Yes4 Yes Yes ?
toString Yes Yes Yes4 Yes Yes ?

1. Starting with Firefox 13, the Range object throws a DOMException as defined in DOM 4, instead of a RangeException defined in prior specifications.

2. Since April 2014 this method is a no-op in Chrome.

3. Starting in Firefox 15.0, this method is a no-op and has no effect.

4. Since August 2015 this method is a no-op in WebKit-based browsers.

See also

Document Tags and Contributors

Tags: 
Last updated by: fscholz,