范围范围可以用来选择文档的某个部分，而不管节点的边界。
1．
DOM中的范围DOM Level2定义了方法createRange()来创建范围。在DOM兼容的浏览器中的，这个发方法属于document对象，所以可以这样创建一个范围：
var oRange = document.createRange();
要判断文档是否支持DOM风格的DOM风格的范围，可以使用hasFeature()方法：
var supportDOMRanges = document.implementation.hasFeature(“Range”, “2.0”);
1）
DOM范围中的简单选区选择使用范围的文档的某部分的最简单的方法是用selectNode()或selectNodeContents()。这些方法只接受一个参数（DOM节点），然后它们用节点中的信息来填充范围。
其中，selectNode()方法将选择整个节点，包括它的子节点，而selectNodeContents()则选择节点所有的子节点。
创建范围时，会分配给它一些特性：
startContainer——范围是从哪个节点中开始的；
startOffset——在startContainer中范围开始的偏移位置；
endContainer——范围是从哪个节点结束的；
endOffset——在endContainer中范围结束的偏移位置；
commonAncestorContainer——startContainer和endContainer都处于哪个最小的节点。
当使用selectNode()时，startContainer、endContainer和commonAncestorContainer均等同于传入的节点的父节点；startOffset等同于给定节点在父节点的childNodes集合中的索引，而endOffset等同于startOffset加1。
当使用selectNodeContents()时，startContainer、endContainer和commonAncestorContainer等同于传入的节点，startOffset等于0；endOffset等于子节点的数量（node.childNode.length）.
2）
DOM范围中的复杂选区创建复杂选区需要使用复杂范围的setStart()和setEnd()方法。这两个方法均接受两个参数：节点的引用和偏移量。对于setStart()，引用的节点是startContainer，偏移量是startOffset；对于setEnd()，引用的节点是endContainer，而偏移量是endOffset。
3）
与DOM范围对象的内容进行交互当创建对象时，内部将创建文档碎片节点，在选区中的所有节点都被附加其。然而，在附加之前，范围对象必须保证所选的内容的故事是正确的。
deleteContents()：从文档中将范围内的内容全部删除；
extracdtContents()：从文档中删除选区范围，并将范围内的文档碎片作为函数返回值返回。
4）插入DOM范围的内容innerNode()方法用来在选区的开头插入节点。除了可以将内容插入范围，还可用surroundContents()方法插入包围范围的内容。这个方法接受一个参数（要包围范围的内容的节点）。在后台会执行以下几步：
抽取出范围中的内容；
将给定节点插入到原来范围所在的位置；
将文档碎片的内容添加到给定节点中。
这类功能在网页上也很有用，可以用来突出显示页面上的特定单词，如下：
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = op1.lastChild;
var oRange = document.createRange();
var oSpan = document.createElement("span");
oSpan.style.backgroundColor = "yellow";
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
oRange.surroundContents(oSpan);
前面的代码用黄色的背景突出显示范围选区。
5) 折叠DOM范围折叠范围类似文本框的一种行为。当文本框中有文字时，可以用鼠标突出全部文字。但是，只要再点击一下鼠标左键，选区就消失了，光标将停留在两个字母之间。
可以用collapse()方法来折叠范围，这个方法接受一个参数：用于表示是折叠到范围的那一端的Boolean值。如果参数是true，范围就折叠到开头；如果是false，范围就折叠到末尾。要判断范围是否已被折叠，可以用collapsed特性：
oRange.collapse(true); //折叠到开始点
alert(oRange.collapsed); //输出true
6）比较DOM范围使用compareBoundaryPoints()方法来判断范围是否具有相同的边界（开头或者结尾）。这个方法接受两个参数：要进行比较的范围及如何进行比较，后者是个常量值：
START_START(0)——比较两个范围的起点；
START_TO_END(1)——比较低一个范围的起点和第二个范围的终点；
END_TO_END(2)——比较两个范围的终点；
END_TO_START(3)——比较第一个范围的终点和第二个范围的起点。
如果第一个范围的被测点在第二个范围的被测点之前，返回-1；
如果两被测点相同，返回0；
如果第一个范围的被测点在第二个范围的被测点之后，返回1。
7）复制DOM的范围通过cloneRange()方法来创建范围的副本。它可以创建与被调用的范围对象完全一致的副本：
var oNewRange = oRange.cloneRange();
新的范围包含的所有特性与原范围的特性均相同，并且能够丝毫不会影响原范围地修改它。
8）清理当使用完范围后，最好用detach()方法释放系统资源。这不是必需的，因为不再被引用的范围最后总是被垃圾收集器清理掉。
2．
IE中的范围IE中的范围称为文本范围，它们主要用来处理文本。要创建范围，要调用<body/>、<button/>、<input/>或者<textarea/>元素上的createTextRange()方法：
var oRange = document.body.createTextRange();
用这个范围创建的范围可以在页面上的任何位置上使用。
1）
IE范围中的简单选区选择页面的某个区域的最简单的方法是用范围的findText()方法，这个方法可找到文本字符串的第一个实例并用范围包含它，
eg. <p id=”p1”><b>Hello</b>阿蜜果</p>
var oRange = document.body.createTextRange();
var bFound = oRange.findText(“Hello”);
代码执行后，文本Hello就被包含在范围之内。可用范围的text特性来检测它，或者也可以检测findText()的返回值，如果是true，表示找到文本：
alert(bFound);
alert(oRange.text);
要在文档中移动范围，可用findText()方法的第二个参数，这是个表示继续搜索的方向的数字；负数表示向回查找，正数表示搜索继续往前。所以，要找到文档中Hello的前两个实例，可以用这段代码：
var oFound = oRange.findText(“Hello”);
var bFoundAgain = oRange.findText(“Hello”, 1);
与DOM的selectNode()方法最相近的是IE的moveToElementText()方法，它可接受DOM元素作为参数，并选取元素的所有文本，如下：
var oRange = document.body.createTextRange();
var oP1 = document.getElementById(“p1”);
oRange. moveToElementText(oP1);
要测试上述代码是否正常，可使用:
alert(oRange.htmlText);
2）
IE范围中的复杂选区略。