前端开发 | 在线支持

Range对象表示文档的连续范围区域，如用户在浏览器窗口中用鼠标拖动选中的区域。

如果一个实现支持 Range 模块，那么 Document对象就定义了 createRange()方法，调用它可创建新的 Range对象。

注意：IE 定义了不兼容的 Document.createRange() 方法，它返回的对象与 Rang 接口相似，但不兼容。

术语：范围、边界点和偏移量

一个范围具有两个边界点，即一个开始点和一个结束点。每个边界点由一个节点和那个节点的偏移量指定。该节点通常是 Element节点、Document节点或Text节点。对于 Element节点和 Document 节点，偏移量指该节点的子节点。偏移量为 0，说明边界点位于该节点的第一个子节点之前。偏移量为 1，说明边界点位于该节点的第一个子节点之后，第二个子节点之前。但如果边界节点是 Text 节点，偏移量则指的是文本中两个字符之间的位置。

Range对象的常量

这些常量指定了如何比较 Range 对象的边界点。

它们是 compareBoundaryPoints() 方法的 how 参数的合法值：

常量	描述
START_TO_START	用指定范围的开始点与当前范围的开始点进行比较。
START_TO_END	用指定范围的开始点与当前范围的结束点进行比较。
END_TO_END	用指定范围的结束点与当前范围的结束点进行比较。
END_TO_START	用指定范围的结束点与当前范围的开始点进行比较。

Range对象的属性

注意：所有属性都是只读的，不能通过设置这些属性改变范围的开始点和结束点，必须调用 setEnd()方法和 setStart()方法实现这一点。

属性	描述
collapsed	如果范围的开始点和结束点在文档的同一位置，则为 true，即范围是空的，或折叠的。
commonAncestorContainer	范围的开始点和结束点的（即它们的祖先节点）、嵌套最深的 Document 节点。
endContainer	包含范围的结束点的 Document 节点。
endOffset	endContainer 中的结束点位置。
startContainer	包含范围的开始点的 Document 节点。
startOffset	startContainer 中的开始点位置。

Range对象的方法

方法	描述
cloneContents()	返回新的 DocumentFragment 对象，它包含该范围表示的文档区域的副本。
cloneRange()	创建一个新的 Range 对象，表示与当前的 Range 对象相同的文档区域。
collapse()	折叠该范围，使它的边界点重合。
compareBoundaryPoints()	比较指定范围的边界点和当前范围的边界点，根据它们的顺序返回 -1、0 和 1。比较哪个边界点由它的第一个参数指定，它的值必须是前面定义的常量之一。
deleteContents()	删除当前 Range 对象表示的文档区域。
detach()	通知实现不再使用当前的范围，可以停止跟踪。如果调用了范围的这个方法，那么接下来调用的该范围任何方法都会抛出代码为 INVALID_STATE_ERR 的 DOMException 异常。
extractContents()	删除当前范围表示的文档区域，并且以 DocumentFragment 对象的形式返回那个区域的内容。该方法和 cloneContents() 方法与 deleteContents() 方法的组合很相似。
insertNode()	把指定的节点插入文档范围的开始点。
selectNode()	设置该范围的边界点，使它包含指定的节点和它的所有子孙节点。
selectNodeContents()	设置该范围的边界点，使它包含指定节点的子孙节点，但不包含指定的节点本身。
setEnd()	把该范围的结束点设置为指定的节点和偏移量。
setEndAfter()	把该范围的结束点设置为紧邻指定节点的节点之后。
setEndBefore()	把该范围的结束点设置为紧邻指定节点之前。
setStart()	把该范围的开始点设置为指定的节点中的指定偏移量。
setStartAfter()	把该范围的开始点设置为紧邻指定节点的节点之后。
setStartBefore()	把该范围的开始点设置为紧邻指定节点之前。
surroundContents()	把指定的节点插入文档范围的开始点，然后重定范围中的所有节点的父节点，使它们成为新插入的节点的子孙节点。
toString()	返回该范围表示的文档区域的纯文本内容。