首页 > 代码库 > JavaScript高级程序设计37.pdf

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

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