所谓折叠范围，就是指范围中未选择文档的任何部分。可以用文本框来描述折叠范围的过程。假设文本框中有一行文本，用鼠标选择了其中一个完整的单词。然后，单击鼠标左键，选区消失，而光标则落在了其中两个字母之间。同样，在折叠范围时，其位置会落在文档中的两个部分之间，可能是范围选区的开始位置，也可能是结束位置。下图展示了折叠范围时发生的情形
【collapse()】
使用collapse()方法来折叠范围，这个方法接受一个参数，该参数是一个布尔值，表示要折叠到范围的哪一端。参数true表示折叠到范围的起点，参数false表示折叠到范围的终点。要确定范围已经折叠完毕，可以检査collapsed属性，如下所示：
range.collapse(true);//折叠到起点 console.log(range.collapsed);//输出true
检测某个范围是否处于折叠状态，可以帮我们确定范围中的两个节点是否紧密相邻。例如，对于下面的HTML代码
<p>Paragraph 1</p><p>Paragraph 2</p>
如果不知道其实际构成(比如说，这行代码是动态生成的)，那么可以像下面这样创建一个范围
var p1 = document.getElementById("p1"); var p2 = document.getElementById("p2"); var range = document.createRange(); range.setStartAfter(p1); range.setStartBefore(p2); console.log(range.collapsed);//输出true
在这个例子中，新创建的范围是折叠的，因为p1的后面和p2的前面什么也没有
比较范围
【compareBoundaryPoints()】
在有多个范围的情况下，可以使用compareBoundaryPoints()方法来确定这些范围是否有公共的边界(起点或终点)。这个方法接受两个参数：表示比较方式的常量值和要比较的范围。表示比较方式的常量值如下所示
Range.START_TO_START(0) ：比较第一个范围和第二个范围的起点
Range.START_TO_END(1) ：比较第一个范围的起点和第二个范围的终点
Range.END_TO_END⑵ ：比较第一个范围和第二个范围的终点
Range.END_T0_START(3) ：比较第一个范围的终点和第一个范围的起点
compareBoundaryPoints()方法可能的返回值如下：如果第一个范围中的点位于第二个范围中的点之前，返回-1；如果两个点相等，返回0；如果第一个范围中的点位于第二个范围中的点之后，返回1。
来看下面的例子
var range1 = document.createRange(); var range2 = document.createRange(); var p1 = document.getElementById("p1"); range1.selectNodeContents(p1); range2.selectNodeContents(p1); range2.setEndBefore(p1.lastChild); alert(range1.compareBoundaryPoints(Range.START_TO_START, range2)); //outputs 0 alert(range1.compareBoundaryPoints(Range.END_TO_END, range2)); //outputs 1
在这个例子中，两个范围的起点实际上是相同的，因为它们的起点都是由selectNodeContents()方法设置的默认值来指定的。因此，第一次比较返回0。但是，range2的终点由于调用setEndBefore()已经改变了，结果是range1的终点位于range2的终点后面，因此第二次比较返回1
复制范围
【cloneRange】
可以使用cloneRange()方法复制范围。这个方法会创建调用它的范围的一个副本
var newRange = range.cloneRange();
新创建的范围与原来的范围包含相同的属性，而修改它的端点不会影响原来的范围
清理范围
【detach()】
在使用完范围之后，最好是调用detach()方法，以便从创建范围的文档中分离出该范围。调用detach()之后，就可以放心地解除对范围的引用，从而让垃圾回收机制回收其内存了。来看下面的例子
range.detach();//从文档中分离 range = null;//解除引用
在使用范围的最后再执行这两个步骤是推荐的方式。一且分离范围，就不能再恢复使用了
IE兼容
IE8-浏览器不支持DOM范围。但支持一种类似的概念，即文本范围(textrange)。文本范围是IE专有的特性，其他浏览器都不支持。顾名思义，文本范围处理的主要是文本(不一定是DOM节点)。通过<body>、<button>、<input>和<textarea>等这几个元素，可以调用createTextRange()方法来创建文本范围。以下是一个例子
var range = document.body.createTextRange();