Range

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

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

属性

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

构造器

Range() 这是一个实验性的 API,请尽量不要在生产环境中使用它。
返回一个以全局(global) Document 作为起点与终点的 Range 对象。

方法

该接口没有继承的方法。

定位方法

Range.setStart()
设置 Range 的起点。
Range.setEnd()
设置 Range 的终点。
Range.setStartBefore()
以其它节点为基准,设置 Range 的起点。
Range.setStartAfter() (en-US)
以其它节点为基准,设置 Range 的起点。
Range.setEndBefore() (en-US)
以其它节点为基准,设置 Range 的终点。
Range.setEndAfter() (en-US)
以其它节点为基准,设置 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() (en-US)
比较两个 Range 的端点。
Range.cloneRange()
返回拥有和原 Range 相同的端点的克隆 Range 对象。
Range.detach() (en-US)
Range 从使用状态中释放,改善性能。
Range.toString() (en-US)
Range 的内容作为字符串返回。

Gecko 方法

下面的是 Mozilla 独有的、不被包含在 W3C DOM 标准中的 Range 方法。

Range.compareNode() (en-US) This is an obsolete API and is no longer guaranteed to work. This API has not been standardized.
返回一个常量,表示节点是否在 Range 的前、后、中、外。
Range.comparePoint() (en-US) 这是一个实验性的 API,请尽量不要在生产环境中使用它。
返回 -1、0、1,分别表示指定点(point)位于 Range 的前、中、后。
Range.createContextualFragment() 这是一个实验性的 API,请尽量不要在生产环境中使用它。
解析指定字符串(格式为 XML 或 HTML),并返回一个文档片段
Range.getBoundingClientRect() 这是一个实验性的 API,请尽量不要在生产环境中使用它。
返回单个 ClientRect 对象,which bounds the entire contents of theRange; this would be the union of all the rectangles returned by range.getClientRects().
Range.getClientRects() 这是一个实验性的 API,请尽量不要在生产环境中使用它。
返回一个 ClientRect 对象的列表,that aggregates the results of Element.getClientRects() for all the elements in the Range.
Range.intersectsNode() 这是一个实验性的 API,请尽量不要在生产环境中使用它。
返回布尔值 (en-US),表示指定节点是否横断 Range
Range.isPointInRange() (en-US) 这是一个实验性的 API,请尽量不要在生产环境中使用它。
返回布尔值 (en-US),表示指定点是否位于 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.

浏览器兼容性

BCD tables only load in the browser

参见