DOM中的范围

DOM2级在doucment类型中定义了createRange()方法。在兼容DOM的浏览器中属于document对象。

1.创建DOM范围

  var range=document.createRange();

2.用范围来实现简单选择

    selectNode(): 选择整个节点，包括子节点

    range.selectNode(节点名称);

   selectNodeContent(): 只选择节点的子节点

3.用范围实现复杂选择

  setStart()  和 setEnd() :接收两个参数，参照节点、偏移量.

  HTML:

     <p id='p1'><b>hello</b> world!</p>

 JS:

    

    var p1=document.getElementById('p1');

    var hNode=p1.firstChild.firstChild;

    varwNode=p1.lastChild;

    varrange=document.createRange();

    range.setStart(hNode,2);//设置起点 llo

    range.setEnd(wNode,3);//设置终点  r

    alert(range);//llo wo

 

4. 操作范围中的内容

deleteContents():从文档中删除范围所包含的内容

extractContents():从范围中移除范围选区，返回文档片段

 cloneContents():返回文档片段包含的是范围中节点的副本

5.插入范围中的节点

 insertNode():向范围选区的开始处插入一个节点。

 surroundContents():环绕范围插入内容，参数：环绕范围内容的节点

 

  6.折叠DOM范围

    collapse():接收一个参数：布尔值，true表示折叠到起点，false表示折叠到终点

    collapsed属性:布尔值，确定是否折叠完成

  7.比较DOM范围

    compareBoundaryPoints():用来确定范围是否有公共边界

    接收两个参数：比较方式的常量值和要比较的范围

    返回值：-1,  0,  1 如果第一个范围中的点位于第二个范围中的点之前，返回-1；相等为0；反之反之。

     使用：range1. compareBoundaryPoints(“Range.START_TO_START”,range2);

8.复制DOM范围

    cloneRange():创建一个调用它的副本

9.清理DOM范围

     range.detach();//从文档中分离  

    range=null;//解除引用