Range

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() 方法源于 Selection object or the caretRangeFromPoint() 方法源于 Document 对象。

There also is the Range() constructor available.

特性

There are no inherited properties.

Range.collapsed 只读
返回 Boolean indicating whether the range's start and end points are at the same position.
Range.commonAncestorContainer 只读
Returns the deepest Node that contains the startContainer and endContainer nodes.
Range.endContainer 只读
返回 Node within which the Range ends.
Range.endOffset 只读
Returns a number representing where in the endContainer the Range ends.
Range.startContainer 只读
返回 Node within which the Range starts.
Range.startOffset 只读
Returns a number representing where in the startContainer the Range starts.

构造函数

Range()
返回 Range object with the global Document as its start and end.

方法

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()
设置 Range to contain the Node and its contents.
Range.selectNodeContents()
设置 Range to contain the contents of a Node .
Range.collapse()
Collapses the Range to one of its boundary points.
Range.cloneContents()
返回 DocumentFragment copying the nodes of a Range .
Range.deleteContents()
Removes the contents of a Range 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()
返回 Range object with boundary points identical to the cloned Range .
Range.detach()
释放 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()
返回 DocumentFragment created from a given string of code.
Range.getBoundingClientRect()
返回 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()
返回 boolean indicating whether the given node intersects the Range .
Range.isPointInRange()
返回 boolean indicating whether the given point is in the Range .

规范

规范 状态 Comment
DOM
The definition of 'Range' in that specification.
实时标准 Do not use RangeException anymore, use DOMException 代替。
Made the second parameter of collapse() optional.
Added the methods isPointInRange() , comparePoint() ,和 intersectsNode() .
Added the constructor Range() .
DOM 剖析和序列化
The definition of 'Extensions to Range' in that specification.
工作草案 Added the method createContextualFragment() .
CSS Object Model (CSSOM) View Module
The definition of 'Extensions to Range' in that specification.
工作草案 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.

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Range Chrome 1 Edge 12 Firefox 4
4
Starting with Firefox 13, the Range object throws a DOMException as defined in DOM 4, instead of a RangeException defined in prior specifications.
IE 9 Opera 9 Safari 1 WebView Android 1 Chrome Android 18 Firefox Android 4
4
Starting with Firefox 13, the Range object throws a DOMException as defined in DOM 4, instead of a RangeException defined in prior specifications.
Opera Android 10.1 Safari iOS 1 Samsung Internet Android 1.0
Range() 构造函数
Chrome Yes Edge ≤18 Firefox 24 IE No Opera 15 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 24 Opera Android 14 Safari iOS Yes Samsung Internet Android Yes
cloneContents Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
cloneRange Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
collapse Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
collapsed Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
commonAncestorContainer Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
compareBoundaryPoints Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
compareNode
弃用 非标
Chrome No Edge No Firefox No IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android No Opera Android No Safari iOS No Samsung Internet Android No
comparePoint
Chrome Yes Edge 17 Firefox Yes IE No Opera 15 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android 14 Safari iOS Yes Samsung Internet Android Yes
createContextualFragment
Chrome Yes Edge 12 Firefox Yes IE 11 Opera 15 Safari 9 WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android 14 Safari iOS Yes Samsung Internet Android Yes
deleteContents Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
detach Chrome Yes
Yes
Since April 2014 this method is a no-op in Chrome .
Edge 12 Firefox 4 — 15
不支持 4 — 15
Starting in Firefox 15.0, this method is a no-op and has no effect.
IE 9 Opera 9 Safari Yes
Yes
Since August 2015 this method is a no-op in WebKit-based browsers .
WebView Android Yes Chrome Android Yes Firefox Android 4 — 15
不支持 4 — 15
Starting in Firefox 15.0, this method is a no-op and has no effect.
Opera Android Yes Safari iOS Yes
Yes
Since August 2015 this method is a no-op in WebKit-based browsers .
Samsung Internet Android Yes
endContainer Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
endOffset Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
extractContents Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
getBoundingClientRect
Chrome Yes Edge 12 Firefox 4 IE 9 Opera 15 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android 14 Safari iOS Yes Samsung Internet Android Yes
getClientRects
Chrome Yes Edge 12 Firefox 4 IE 9 Opera 15 Safari 5 WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android 14 Safari iOS Yes Samsung Internet Android Yes
insertNode Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android 10.1 Safari iOS Yes Samsung Internet Android Yes
intersectsNode
Chrome Yes Edge 17 Firefox 17 IE No Opera 15 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 19 Opera Android 14 Safari iOS Yes Samsung Internet Android Yes
isPointInRange
Chrome Yes Edge 15 Firefox Yes IE No Opera 15 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android 14 Safari iOS Yes Samsung Internet Android Yes
selectNode Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
selectNodeContents Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
setEnd Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
setEndAfter Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
setEndBefore Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
setStart Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
setStartAfter Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
setStartBefore Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
startContainer Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
startOffset Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
surroundContents Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
toString Chrome Yes Edge 12 Firefox 4 IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes

图例

完整支持
完整支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
弃用。不要用于新网站。
见实现注意事项。

另请参阅