JavaScript高级程序设计37.pdf

用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

检测某个范围是否处于折叠状态，可以帮助我们确定范围中两个节点是否紧密相邻