range

Range表示包含节点和部分文本节点的文档片段。

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

属性

Range.collapsed 只读: 返回一个用于判断 Range 起始位置和终止位置是否相同的布尔值。
Range.commonAncestorContainer 只读: 返回包含 startContainer 和 endContainer 的最深的节点。
Range.endContainer 只读: 返回包含 Range 终点的节点。
Range.endOffset 只读: 返回 endContainer 中表示Range终点位置的数字。
Range.startContainer 只读: 返回包含 Range 开始的节点。
Range.startOffset 只读: 返回 startContainer 中表示 Range 起始位置的数字。

方法

定位方法

我们没有在此列举继承方法。

Range.setStart(): 设置 Range 的起点。
Range.setEnd(): 设置 Range 的终点。
Range.setStartBefore(): 以其它节点（ Node）为基准，设置 Range 的起点。
Range.setStartAfter(): 以其它节点为基准，设置 Range 的始点。
Range.setEndBefore(): 以其它节点为基准，设置 Range 的终点。
Range.setEndAfter(): 以其它节点为基准，设置 Range 的终点。
Range.selectNode(): 设定一个包含节点和节点内容的 Range 。
Range.selectNodeContents(): 设定一个包含某个节点内容的 Range 。
Range.collapse(): 向指定端点折叠该 Range 。

编辑方法

通过以下方法，可以从 Range 中获得节点，改变 Range 的内容。

Range.cloneContents(): 返回 Range 当中节点的文档片段（DocumentFragment）。
Range.deleteContents(): 从文档（Document）中移除 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(): 返回常量，表示node是否在range的前、后、中、外。
Range.comparePoint(): 返回-1、0、1，分别表示指定点在range的前、中、后。
Range.createContextualFragment(): 解析指定字符串（XML或HTML），并返回document fragment。

Range.intersectsNode(): 返回boolean值，表示指定Node是否横断Range。
Range.isPointInRange(): 返回boolean值，表示指定点是否在range中。

Range.getBoundingClientRect(): Returns a ClientRect object which bounds the entire contents of theRange; this would be the union of all the rectangles returned by range.getClientRects().
Range.getClientRects(): Returns a list of ClientRect objects that aggregates the results of Element.getClientRects() for all the elements in the 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	Living Standard	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	Recommendation	Initial specification.

特性	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)	未实现	15.0	(Yes)
`compareNode()`	未实现	1.0 (1.7 or earlier) Removed in 3.0 (1.9)	未实现	未实现	未实现
`isPointInRange()`, and `comparePoint()`	(Yes)	(Yes)	未实现	15.0	?
`intersectsNode()`	(Yes)	17.0 (17.0) [2]	未实现	15.0	?
`getClientRects()` and `getBoundingClientRect()`	(Yes)	4.0 (2.0)	9	15.0	5
`createContextualFragment()`	(Yes)	(Yes)	未实现	15.0	?

特性	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.

扩展

The DOM interfaces index

Dec	JAN	Feb
	16
2015	2016	2017