Our volunteers haven't translated this article into فارسی yet. Join us and help get the job done!
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 caretRangeAtPoint()
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 thestartContainer
andendContainer
nodes. Range.endContainer
Read only- Returns the
Node
within which theRange
ends. Range.endOffset
Read only- Returns a number representing where in the
endContainer
theRange
ends. Range.startContainer
Read only- Returns the
Node
within which theRange
starts. Range.startOffset
Read only- Returns a number representing where in the
startContainer
theRange
starts.
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
Range
relative to anotherNode
. Range.setStartAfter()
- Sets the start position of a
Range
relative to anotherNode
. Range.setEndBefore()
- Sets the end position of a
Range
relative to anotherNode
. Range.setEndAfter()
- Sets the end position of a
Range
relative to anotherNode
. Range.selectNode()
- Sets the
Range
to contain theNode
and its contents. Range.selectNodeContents()
- Sets the
Range
to contain the contents of aNode
. Range.collapse()
- Collapses the
Range
to one of its boundary points. Range.cloneContents()
- Returns a
DocumentFragment
copying the nodes of aRange
. Range.deleteContents()
- Removes the contents of a
Range
from theDocument
. Range.extractContents()
- Moves contents of a
Range
from the document tree into aDocumentFragment
. Range.insertNode()
- Insert a
Node
at the start of aRange
. Range.surroundContents()
- Moves content of a
Range
into a newNode
. Range.compareBoundaryPoints()
- Compares the boundary points of the
Range
with anotherRange
. Range.cloneRange()
- Returns a
Range
object with boundary points identical to the clonedRange
. 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
ClientRect
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 of
ClientRect
objects that aggregates the results ofElement.getClientRects()
for all the elements in theRange
. Range.intersectsNode()
- Returns a
boolean
indicating whether the given node intersects theRange
. Range.isPointInRange()
- Returns a
boolean
indicating 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. |
Recommendation | Initial specification. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | 1.0 (1.7 or earlier) [1] | 9.0 | 9.0 | (Yes) |
Range() constructor |
(Yes) | 24.0 (24.0) | No support | 15.0 | (Yes) |
compareNode() |
No support | 1.0 (1.7 or earlier) Removed in 3.0 (1.9) |
No support | No support | No support |
isPointInRange() , and comparePoint() |
(Yes) | (Yes) | No support | 15.0 | ? |
intersectsNode() |
(Yes) | 17.0 (17.0) [2] | No support | 15.0 | ? |
getClientRects() and getBoundingClientRect() |
(Yes) | 4.0 (2.0) | 9 | 15.0 | 5 |
createContextualFragment() |
(Yes) | (Yes) | 11 | 15.0 | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | 1.0 (1.0) [1] | 9.0 | 9.0 | (Yes) |
[1] Starting with Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) the Range
object throws a DOMException
as defined in DOM 4, instead of a RangeException
defined in prior specifications.
[2] Gecko supported it up to Gecko 1.9, then removed it until Gecko 17 where it was reimplemented, matching the spec.