Range - 表示文档的一部分，可以包含节点和部分文本节点

Range 接口表示文档的一部分，可以包含节点和部分文本节点。

可以使用 Document.createRange() 方法来创建范围。也可以通过使用 Selection 对象的 getRangeAt() 方法或 Document 对象的 caretRangeFromPoint() 方法来获得 Range 对象。

还有 Range() 构造函数可以使用。

构造函数

Range()

返回以全局 Document 作为开始和结束的 Range 对象。

属性

没有继承的属性。

Range.collapsed 只读

返回一个 Boolean，指示范围的起点和终点是否在同一位置。

Range.commonAncestorContainer 只读

返回包含 startContainer 和 endContainer 节点的最深的 Node。

Range.endContainer 只读

返回 Range 结束的 Node。

Range.endOffset 只读

返回一个数字，表示 Range 在 endContainer 中的何处结束。

Range.startContainer 只读

返回 Range 开始的 Node。

Range.startOffset 只读

返回一个数字，表示 Range 在 startContainer 中的起始位置。

方法

没有继承的方法。

Range.setStart()

设置 Range 的起始位置。

Range.setEnd()

设置 Range 的结束位置。

Range.setStartBefore()

设置 Range 相对于另一个 Node 的起始位置。

Range.setStartAfter()

设置 Range 相对于另一个 Node 的起始位置。

Range.setEndBefore()

设置 Range 相对于另一个 Node 的结束位置。

Range.setEndAfter()

设置 Range 相对于另一个 Node 的结束位置。

Range.selectNode()

设置 Range 以包含 Node 及其内容。

Range.selectNodeContents()

设置 Range 以包含 Node 的内容。

Range.collapse()

将 Range 折叠到其边界点之一。

Range.cloneContents()

返回复制 Range 节点的 DocumentFragment。

Range.deleteContents()

从 Document 中删除 Range 的内容。

Range.extractContents()

将 Range 的内容从文档树移动到 DocumentFragment 中。

Range.insertNode()

在 Range 的开头插入一个 Node。

Range.surroundContents()

将 Range 的内容移动到新的 Node 中。

Range.compareBoundaryPoints()

将 Range 的边界点与另一个 Range 进行比较。

Range.cloneRange()

返回一个 Range 对象，其边界点与克隆的 Range 相同。

Range.detach()

释放使用的 Range 以提高性能。

Range.toString()

返回 Range 的文本。

Range.compareNode()

返回一个常量，该常量表示 Node 是在范围之前，之后，内部还是周围。

Range.comparePoint()

返回 -1、0 或 1，指示该点是在 Range 之前，内部还是之后。

Range.createContextualFragment()

返回根据给定的代码字符串创建的 DocumentFragment。

Range.getBoundingClientRect()

返回一个 DOMRect 对象，该对象限制了 Range 的全部内容；这将是 range.getClientRects() 返回的所有矩形的并集。

Range.getClientRects()

返回一个 DOMRect 对象的列表，该列表汇总了 Range 中所有元素的 Element.getClientRects() 结果。

Range.intersectsNode()

返回一个 boolean，该布尔值指示给定的节点是否与 Range 相交。

Range.isPointInRange()

返回一个 boolean，指示给定的点是否在范围内。

规范

规范	状态	备注
DOM Range 的定义	现行的标准	不再使用 RangeException ，改用 DOMException。 将 collapse() 的第二个参数设为可选。 添加了 isPointInRange()，comparePoint() 和 intersectsNode() 方法。 添加了 collapse() 构造函数。
DOM Parsing and Serialization Extensions to Range 的定义	工作草案	添加了 createContextualFragment() 方法。
CSS Object Model (CSSOM) View Module Extensions to Range 的定义	工作草案	添加了 getClientRects() 和 getBoundingClientRect() 方法。
Document Object Model (DOM) Level 2 Traversal and Range Specification Range 的定义	已过时	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

1. 从 Firefox 13 开始，Range 对象将引发 DOM 4 中定义的 DOMException，而不是先前规范中定义的 RangeException。

2. 从 2014 年 4 月开始，此方法在 Chrome 中不再可用。

3. 从 Firefox 15.0 开始，此方法不可用且无效。

4. 从 2015 年 8 月开始，此方法在基于 WebKit 的浏览器中不再可用。

相关链接

• Web 接口目录