用DOM范围实现简单选择
selectNode()和selectNodeContents()它们都接收一个DOM节点参数，然后使用该节点中的信息来填充范围，其中selectNode()方法选择整个节点，包括其子节点；而selectNodeContents()方法只选择节点的子节点
var range1=document.createRange();
var range2=document.createRange();
p1=document.getElementById("p1");
range1.selectNode(p1); //包含id为“p1”的整个节点
range2.selectNodeContents(p1); //只包含id为“p1”的子节点
在调用selectNode()时，startContainer、endContainer和commonAncestorContainer都等于传入节点的父节点，而startOffset属性等于给定节点在其父节点的childNodes集合中的索引，endOffset等于startOffset加上选择了多少个节点
在调用selectNodeContents()时，startContainer、endContainer和commonAncestorContainer都等于传入的节点，而startOffset属性始终等于0(第一个子节点开始)，endOffset等于子节点数量
更精细的控制
setStartBefore(refNode):将范围的起点设置在refNode之前，refNode就是范围选区的第一个子节点，同时会将startContainer设置为refNode.parentNode
setStartAfter(refNode):将范围的起点设置在refNode之后，refNode的后一个同胞元素就是范围选区的第一个子节点
setEndBefore(refNode):将范围的终点设置在refNode之前，上一个同胞元素是范围选区中最后一个子节点
setEndAfter(refNode):将范围的终点设置在refNode之后，refNode是范围选区中最后一个子节点
用DOM范围实现复杂选择
setStrat()和setEnd()方法，两个方法都接收两个参数，一个参照节点和一个偏移量值，对于setStart()来说，参照节点会变成startContainer，偏移量值会变成startOffset；对于setEnd()来说,参照节点会变成endContainer，偏移量值会变成endOffset
操作DOM范围中的内容
在创建范围时，内部会为这个范围创建一个文档片段，范围所属的全部节点都被添加到这个文档片段中，对于残缺的标签，范围会自动为其补全（注意：表示范围的内部文档片段中的所有节点，都只是指向文档中相应节点的指针）
第一个方法：deleteContents()，能够从文档中删除范围所包含的内容；
extractContents()也会从文档中移除范围选区，有一点不同的是它会返回被移除的文档片段，以便插入到文档中其他地方（注意，在使用appendChild()方法时，添加到文档中只是片段的子节点，非片段本身）
cloneContents()，创建范围对象的一个副本，再其他地方插入该副本
插入DOM范围中的内容
insertNode()可以向范围选区开始处插入一个节点
range.insertNode(span); //插入节点
surroundContents()方法，环绕范围插入内容，接收一个环绕范围内容的节点，后台会执行3步：
提取出范围中的内容（类似extractContent()）；
将给定节点插入到文档中原来范围所在的位置上；
将文档片段的内容添加到给定节点中。
...
var span=document.createElement("span");
span.style.backgroundColor="yellow";
range=surroundContents(span);
以上代码给范围选区添加黄色背景
折叠DOM范围
collapse()方法，接收一个布尔值参数，表示折叠到范围的哪一端，true表示折叠到范围的起点，false则为终点，collapsed属性确定范围是否折叠完毕
range.collapse(true); //折叠到起点
alert(range.collapsed); //输出true
检测某个范围是否处于折叠状态，可以帮助我们确定范围中两个节点是否紧密相邻