Range

Range 接口表示一个包含节点与文本节点的一部分的文档片段。

可以用 Document 对象的 Document.createRange 方法创建 Range,也可以用 Selection 对象的 getRangeAt 方法获取 Range。另外,还可以通过 Document 对象的构造函数 Range() 来得到 Range。

属性

Range.collapsed 只读
返回一个表示 Range 的起始位置和终止位置是否相同的布尔值
Range.commonAncestorContainer 只读
返回完整包含 startContainerendContainer 的、最深一级的节点
Range.endContainer 只读
返回包含 Range 终点的节点
Range.endOffset 只读
返回一个表示 Range 终点在 endContainer 中的位置的数字。
Range.startContainer 只读
返回包含 Range 开始的节点
Range.startOffset 只读
返回一个表示 Range 起点在 startContainer 中的位置的数字。

构造器

Range()
返回一个以全局(global) Document 作为起点与终点的 Range 对象。

方法

该接口没有继承的方法。

定位方法

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 by range.getClientRects().
Range.getClientRects()
返回一个 ClientRect 对象的列表,that aggregates the results of Element.getClientRects() for all the elements in the Range.
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.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
RangeChrome Full support YesEdge Full support YesFirefox Full support 4
Notes
Full support 4
Notes
Notes Starting with Firefox 13, the Range object throws a DOMException as defined in DOM 4, instead of a RangeException defined in prior specifications.
IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4
Notes
Full support 4
Notes
Notes 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 Full support YesSafari iOS Full support YesSamsung Internet Android ?
Range() constructor
Experimental
Chrome Full support YesEdge Full support YesFirefox Full support 24IE No support NoOpera Full support 15Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 24Opera Android Full support 14Safari iOS Full support YesSamsung Internet Android ?
cloneContentsChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
cloneRangeChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
collapseChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
collapsedChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
commonAncestorContainerChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
compareBoundaryPointsChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
compareNode
ExperimentalDeprecatedNon-standard
Chrome No support NoEdge ? Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android ?
comparePoint
Experimental
Chrome Full support YesEdge Full support 17Firefox Full support YesIE No support NoOpera Full support 15Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support 14Safari iOS Full support YesSamsung Internet Android ?
createContextualFragment
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 11Opera Full support 15Safari Full support 9WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support 14Safari iOS Full support YesSamsung Internet Android ?
deleteContentsChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
detachChrome Full support Yes
Notes
Full support Yes
Notes
Notes Since April 2014 this method is a no-op in Chrome.
Edge Full support 12Firefox No support 4 — 15
Notes
No support 4 — 15
Notes
Notes Starting in Firefox 15.0, this method is a no-op and has no effect.
IE Full support 9Opera Full support 9Safari Full support Yes
Notes
Full support Yes
Notes
Notes Since August 2015 this method is a no-op in WebKit-based browsers.
WebView Android Full support YesChrome Android Full support YesFirefox Android No support 4 — 15
Notes
No support 4 — 15
Notes
Notes Starting in Firefox 15.0, this method is a no-op and has no effect.
Opera Android Full support YesSafari iOS Full support Yes
Notes
Full support Yes
Notes
Notes Since August 2015 this method is a no-op in WebKit-based browsers.
Samsung Internet Android ?
endContainerChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
endOffsetChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
extractContentsChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
getBoundingClientRect
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 15Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 14Safari iOS Full support YesSamsung Internet Android ?
getClientRects
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 15Safari Full support 5WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 14Safari iOS Full support YesSamsung Internet Android ?
insertNodeChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support YesSamsung Internet Android ?
intersectsNode
Experimental
Chrome Full support YesEdge Full support 17Firefox Full support 17IE No support NoOpera Full support 15Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 19Opera Android Full support 14Safari iOS Full support YesSamsung Internet Android ?
isPointInRange
Experimental
Chrome Full support YesEdge Full support 15Firefox Full support YesIE No support NoOpera Full support 15Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support 14Safari iOS Full support YesSamsung Internet Android ?
selectNodeChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
selectNodeContentsChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
setEndChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
setEndAfterChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
setEndBeforeChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
setStartChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
setStartAfterChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
setStartBeforeChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
startContainerChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
startOffsetChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
surroundContentsChrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
toStringChrome Full support YesEdge Full support YesFirefox Full support 4IE Full support 9Opera Full support 9Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
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.

参见