Range 接口表示一个包含节点与文本节点的一部分的文档片段。
可以用 Document 对象的 Document.createRange 方法创建 Range,也可以用 Selection 对象的 getRangeAt 方法获取 Range。另外,还可以通过 Document 对象的构造函数 Range() 来得到 Range。
属性
Range.collapsed只读- 返回一个表示
Range的起始位置和终止位置是否相同的布尔值。 Range.commonAncestorContainer只读- 返回完整包含
startContainer和endContainer的、最深一级的节点。 Range.endContainer只读- 返回包含
Range终点的节点。 Range.endOffset只读- 返回一个表示
Range终点在endContainer中的位置的数字。 Range.startContainer只读- 返回包含
Range开始的节点。 Range.startOffset只读- 返回一个表示
Range起点在startContainer中的位置的数字。
构造器
方法
该接口没有继承的方法。
定位方法
Range.setStart()- 设置
Range的起点。 Range.setEnd()- 设置
Range的终点。 Range.setStartBefore()- 以其它
节点为基准,设置Range的起点。 Range.setStartAfter()- 以其它
节点为基准,设置Range的起点。 Range.setEndBefore()- 以其它
节点为基准,设置Range的终点。 Range.setEndAfter()- 以其它
节点为基准,设置Range的终点。 Range.selectNode()- 使
Range包含某个节点及其内容。 Range.selectNodeContents()- 使
Range包含某个节点的内容。 Range.collapse()- 将
Range折叠至其端点(boundary points,起止点,指起点或终点,下同)之一。
编辑方法
通过以下方法,可以从 Range 中获得节点,改变 Range 的内容。
Range.cloneContents()- 返回一个包含
Range中所有节点的文档片段。 Range.deleteContents()- 从
文档中移除Range包含的内容。 Range.extractContents()- 把
Range的内容从文档树移动到一个文档片段中。 Range.insertNode()- 在
Range的起点处插入一个节点。 Range.surroundContents()- 将
Range的内容移动到一个新的节点中。
其他方法
Range.compareBoundaryPoints()- 比较两个
Range的端点。 Range.cloneRange()- 返回拥有和原
Range相同的端点的克隆Range对象。 Range.detach()- 将
Range从使用状态中释放,改善性能。 Range.toString()- 把
Range的内容作为字符串返回。
Gecko 方法
下面的是 Mozilla 独有的、不被包含在 W3C DOM 标准中的 Range 方法。
Range.compareNode()- 返回一个常量,表示
节点是否在Range的前、后、中、外。 Range.comparePoint()- 返回 -1、0、1,分别表示指定点(point)位于
Range的前、中、后。 Range.createContextualFragment()- 解析指定字符串(格式为 XML 或 HTML),并返回一个
文档片段。 Range.getBoundingClientRect()- 返回单个
ClientRect对象,which bounds the entire contents of theRange; this would be the union of all the rectangles returned byrange.getClientRects(). Range.getClientRects()- 返回一个
ClientRect对象的列表,that aggregates the results ofElement.getClientRects()for all the elements in theRange. Range.intersectsNode()- 返回
布尔值,表示指定节点是否横断Range。 Range.isPointInRange()- 返回
布尔值,表示指定点是否位于Range之中。
规范
| 规范 | 状态 | 注释 |
|---|---|---|
| DOM Range |
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 Extensions to Range |
Working Draft | Added the method createContextualFragment(). |
| CSS Object Model (CSSOM) View Module Extensions to Range |
Working Draft | Added the methods getClientRects() and getBoundingClientRect(). |
| Document Object Model (DOM) Level 2 Traversal and Range Specification Range |
Obsolete | Initial specification. |
浏览器兼容性
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.
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Range | 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 |
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.