范围
一、DOM中的范围
1.startContainer :包含范围起点的节点 即选区中第一个节点的父节点。startOffset:范围在startContainer中起点的偏移量。如果startContainer是文本节点、注释节点或者CDATA节点，那么startOffset就是范围起点之前跳过的字符数量。否则startOffset就是范围中第一个子节点的索引。endContainer:包含范围终点的节点，即选区中最后一个节点的父节点。endOffset范围在endContainer中终点的偏移量。 还有一个commonAncestorContainer:startContainer和endContainer共同的祖先节点在文档树种位置最深的哪个。
2.使用document.createRange();创建一个范围
3.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集合中的索引。setEndAfter(refNode):将范围的终点设置在refNode之后，因此refNode也就是范围选区中的最后一个子节点，同时会将endContainer属性设置为refNode.parentNode，将endOffset属性设置为 refNode在其父节点的childNodes集合中的索引+1。
二.用DOM范围实现复杂选择 用到两个方法 一个是setStart()设置起始位置和setEnd（）设置范围的末位置。
<body>
<p id="p1"><b>hello</b>world!</p>
<script>
var p1 = document.getElementById("p1");
helloNode = p1.firstChild.firstChild;
worldNode = p1.lastChild;
var range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);
</script>
</body>
可以使用range.deleteContents() 来删除范围 extractContents()方法也可以删除范围选区，但它与前者的差别在于会将范围的文档片段返回。用于别的地方 如下：
<p id="p1"><b>hello</b>world!</p>
<script>
var p1 = document.getElementById("p1");
helloNode = p1.firstChild.firstChild;
worldNode = p1.lastChild;
var range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);
var fragment = range.extractContents();
p1.parentNode.appendChild(fragment);
</script>
可以使用cloneContents()创建范围对象的一个副本 ，饭后再插入该副本 用法与extractContents()差不多
可以使用insertNode()方法可以向范围选区的开始处（之前）插入一个节点如下
<body>
<p id="p1"><b>hello</b>world!</p>
<script>
var p1 = document.getElementById("p1");
helloNode = p1.firstChild.firstChild;
worldNode = p1.lastChild;
var range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);
var span = document.createElement("span");
span.style.color = "red";
span.appendChild(document.createTextNode("Inserted text"));
range.insertNode(span);
</script> //可以使用这种技术插入一些帮助提示信息，例如在打开新窗口的链接旁边插入一幅图像。
可以使用surroundContents()环绕范围内容的节点。在环绕范围插入内容时，后台会执行下列步骤：一是提取出范围中的内容（类似执行extractContent()）;二是将给定节点插入到文档中原来范围所在的位置上;三是将文档片段的内容添加到给点节点中
//可以使用这种技术来凸显显示网页中的某些词句 如下的代码会给范围选区加上一个黄色的背景
<body>
<p id="p1"><b>hello</b>world!</p>
<script>
var p1 = document.getElementById("p1");
helloNode = p1.firstChild.firstChild;
worldNode = p1.lastChild;
range = document.createRange();
range.selectNode(helloNode);
var span = document.createElement("span");
span.style.backgroundColor = "yellow";
range.surroundContents(span);
</script>
</body>
三.折叠DOM范围 ：指范围中未选中文档的任何部分，可以用文本框来描述折叠范围的过程。
使用collapse()方法来折叠范围这个方法接收一个参数，true折叠刀范围的起点。参数是false折叠刀范围的终点 。确定折叠完毕可用collapsed来确定 如下代码 range.collapse(true); alert(range.collapsed);
可以使用compareBoundaryPoints()方法来确定这些范围是否有公共边界（起点或者终点）。这个方法接受两个参数：表示比较方式的常量值和要比较的范围。比较方式的常量值如下:Range.START_TO_START(0)：比较第一个范围和第二个范围的起点；Range.START_TO_END（1）：比较第一个范围的起点和第二个范围的终点。Range.START_TO_END（2）比较第一个范围和第二个范围的终点；Range.START_TO_START（3）比较第二个范围的终点和第一个范围的起点。
返回值如下。如果第一个范围中的点位于第二个范围中的点之前，返回1；如果两个点相等返回0；如果第一个范围中的点位于第二个范围中的点之后，返回1；
