为了让开发人员更方便地控制页面，DOM定义了“范围”(range)接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限(选择在后台完成，对用户是不可见的)。在常规的DOM操作不能更有效地修改文挡时，使用范围往往可以达到目的。本文将详细介绍DOM范围，下面来一起看看吧。
创建范围
Document类型中定义了createRange()方法。在兼容DOM的浏览器中，这个方法属于document对象。使用hasFeature()或者直接检测该方法，都可以确定浏览器是否支持范围
[注意]IE8-浏览器不支持
var supportsRange = document.implementation.hasFeature("Range", "2.0"); var alsoSupportsRange =(typeof document.createRange == "function");
如果浏览器支持范围，那么就可以使用createRange()来创建DOM范围，如下所示
var range = document.createRange();
与节点类似，新创建的范围也直接与创建它的文档关联在一起，不能用于其他文档。创建了范围之后，接下来就可以使用它在后台选择文档中的特定部分。而创建范围并设置了其位置之后，还可以针对范围的内容执行很多种操作，从而实现对底层DOM树的更精细的控制
每个范围由一个Range类型的实例表示，这个实例拥有很多属性和方法。
下列属性提供了当前范围在文档中的位置信息
startContainer：包含范围起点的节点(即选区中第一个节点的父节点)
startoffset：范围在startContainer中起点的偏移量。如果startContainer是文本节点、注释节点或CDATA节点，那么startoffset就是范围起点之前跳过的字符数量。否则，startoffset就是范围中第一个子节点的索引
endContainer：包含范围终点的节点(即选区中最后一个节点的父节点)
endOffset：范围在endContainer中终点的偏移量(与startoffset遵循相同的取值规则)
commonAncestorContainer：startContainer和endContainer共同的祖先节点在文档树中位置最深的那个
在把范围放到文档中特定的位置时，这些属性都会被赋值
简单选择
要使用范围来选择文档中的一部分，最简单的方式就是使用selectNode()或selectNodeContents() 。这两个方法都接受一个参数，即一个DOM节点，然后使用该节点中的信息来填充范围。其中，selectNode()方法选择整个节点，包括其子节点；而selectNodeContents()方法则只选择节点的子节点
<!DOCTYPE html> <html> <body> <p><b>Hello</b> world!</p> </body> </html>
我们可以使用下列代码来创建范围
var range1 = document.createRange(); var range2 = document.createRange(); var p1 = document.getElementById("p1"); //Range {startContainer: body, startOffset: 1, endContainer: body, endOffset: 2, collapsed: false…} range1.selectNode(p1); //Range {startContainer: p#p1, startOffset: 0, endContainer: p#p1, endOffset: 2, collapsed: false…} range2.selectNodeContents(p1);
这里创建的两个范围包含文档中不同的部分：rangl包含<p>元素及其所有子元素，而rang2包含<b>元素、文本节点"Hello"和文本节点"world!"
在调用selectNode()时，startContainer、endContainer和commonAncestorContainer都等于传入节点的父节点，也就是这个例子中的document.body。而startoffset属性等于给定节点在其父节点的childNodes集合中的索引(在这个例子中是1——因为兼容DOM的浏览器将空格算作一个文本节点)，endOffset等于startoffset加1(因为只选择了一个节点)
在调用selectNodeContents()时，startContainer、endContainer和commonAncestorContainer等于传入的节点，即这个例子中的<p>元素。而startoffset属性始终等于0，因为范围从给定节点的第一个子节点开始。最后，endOffset等于子节点的数量(node.childNodes.length)，在这个例子中是2
此外，为了更精细地控制将哪些节点包含在范围中，还可以使用下列方法
setStartBefore(refNode) ：将范围的起点设置在refNode之前，因此refNode也就是范围选区中的第一个子节点。同时会将startContainer属性设置为refNode.parentNode，将startoffset属性设置为refNode在其父节点的childNodes集合中的索引
setStartAfter(refNode) ：将范围的起点设置在refNode之后，因此refNode也就不在范围之内了，其下一个同辈节点才是范围选区中的第一个子节点。同时会将startContainer属性设置为refNode.parentNode，将startoffset属性设置为refNode在其父节点的childNodes集合中的索引加1
setEndBefore(refNode) ：将范围的终点设置在refNode之前，因此refNode也就不在范围之内了，其上一个同辈节点才是范围选区中的最后一个子节点。同时会将endContainer属性设置为refNode.parentNode，将endOffset属性设置为refNode在其父节点的childNodes集合中的索引