setEndAfter(refNode) ：将范围的终点设置在refNode之后，因此refNode也就是范围选区中的最后一个子节点。同时会将endContainer属性设置为refNode.parentNode，将endOffset属性设置为refNode在其父节点的childNodes集合中的索引加1
调用这些方法时，所有属性会自动设置好。不过，要想创建复杂的范围选区，也可以直接指定这些属性的值
复杂选择
要创建复杂的范围就得使用setStart()和setEnd()方法。这两个方法都接受两个参数：一个参照节点和一个偏移量值。对setStart()来说，参照节点会变成startContainer。而偏移量值会变成startoffset。对于setEnd()来说，参照节点会变成endContainer，而偏移量值会变成endOffset。可以使用这两个方法来模仿selectNode()和selectNodeContents() 。
来看下面的例子
var range1 = document.createRange(); var range2 = document.createRange(); var p1 = document.getElementById("p1"); var p1Index = -1; var i, len; for (i=0, len=p1.parentNode.childNodes.length; i < len; i++) { if (p1.parentNode.childNodes[i] == p1) { p1Index = i; break; } } range1.setStart(p1.parentNode, p1Index); range1.setEnd(p1.parentNode, p1Index + 1); range2.setStart(p1, 0); range2.setEnd(p1, p1.childNodes.length);
显然，要选择这个节点(使用range1)，就必须确定当前节点(p1)在其父节点的childNodes集合中的索引。而要选择这个节点的内容(使用range2)，也不必计算什么；只要通过setStart()和setEnd()设置默认值即可。模仿selectNode()和selectNodeContents()并不是setStart()和setEnd()的主要用途，它们更胜一筹的地方在于能够选择节点的一部分
假设只想选择前面HTML示例代码中从“Hello"的"llo"到"world!"的"o"——很容易做到
第一步是取得所有节点的引用，如下所示：
var p1 = document.getElementById("p1"); var helloNode = p1.firstChild.firstChild; var worldNode = p1.lastChild;
实际上，"Hello”文本节点是<p>元素的孙子节点，因为它本身是<b>元素的一个子节点。因此，p1.firstchild取得的是<b>，而p1.firstchild.firstchild取得的才是这个文本节点。"world!"文本节点是<p>元素的第二个子节点(也是最后一个子节点)，因此可以使用p1.lastChild取得该节点。
然后，必须在创建范围时指定相应的起点和终点，如下所示
var range = document.createRange(); range.setStart(helloNode, 2); range.setEnd(worldNode, 3);
因为这个范围的选区应该从"Hello"中"e"的后面开始，所以在setStart()中传入helloNode的同时，传入了偏移量2(即"e"的下一个位置；"H"的位置是0)。设置选区的终点时，在setEnd()中传入worldNode的同时传入了偏移量3，表示选区之外的第一个字符的位置，这个字符是”r"，它的位置是3(位置0上还有一个空格)。
如下所示
由于helloNode和worldNode都是文本节点，因此它们分别变成了新建范围的startContainer和endContainer。此时startoffset和endOffset分别用以确定两个节点所包含的文本中的位置，而不是用以确定子节点的位置(就像传入的参数为元素节点时那样)。此时的commonAncestorContainer是<p>元素，也就是同时包含这两个节点的第一个祖先元素
当然，仅仅是选择了文档中的某一部分用处并不大。但重要的是，选择之后才可以对选区进行操作
操作范围内容
在创建范围时，内部会为这个范围创建一个文档片段，范围所属的全部节点都被添加到了这个文档片段中。为了创建这个文档片段，范围内容的格式必须正确有效。在前面的例子中，创建的选区分别开始和结束于两个文本节点的内部，因此不能算是格式良好的DOM结构，也就无法通过DOM来表示。但是，范围知道自身缺少哪些开标签和闭标签，它能够重新构建有效的DOM结构以便对其进行操作
对于前面的例子而言，范围经过计算知道选区中缺少一个开始的<b>标签，因此就会在后台动态加入一个该标签，同时还会在前面加入一个表示结束的</b>标签以结束"He"。于是，修改后的DOM就变成了如下所示
<p><b>He</b><b>llo</b> world!</p>
另外，文本节点"world!"也被拆分为两个文本节点，一个包含"wo"，另一个包含"rid!"。最终的DOM树下图所示，右侧是表示范围的文档片段的内容
像这样创建了范围之后，就可以使用各种方法对范围的内容进行操作了
[注意]表示范围的内部文档片段中的所有节点，都只是指向文档中相应节点的指针
【deleteContents()】
操作范围内容的第一个方法是deleteContents() ，这个方法能够从文档中删除范围所包含的内容