范围range接口的学习笔记

DOM2级中可以通过document.createRange()方法创建Range实例

var range = document.createRange();

Ragne实例包含以下属性：

　　startContainer:包含范围起点的节点.

　　startOffset:范围在startContainer中起点的偏移量

　　endContainer: 包含范围终点的节点

　　endOffset:范围在endContainer中终点的偏移量

　　commonAncestorContainer: startContainer 和 endContainer共同的祖先节点在文档书中位置最深的那个

　　collapsed:选区是否折叠状态

Range实例要进行选择可以通过调用selectNode（）和selectNodeContents（）方法。

 

除了这两个方法之外还有一些用于精细控制范围方法：

　　setStartBefore(refNode)

　　setStartAfter(refNode)

　　setEndBefore(refNode)

　　setEndAfter(refNode)

　　

　　setStart(node, offset)

　　setEnd(node, offset)

Range范围选中的内容的操作方法：

　　deleteContents():删除范围所包含内容

　　extractContents():删除范围所包含的内容，并返回该内容（可用于插入文档其他位置）

　　cloneContents(): 创建范围对象的一个副本返回的是文档片段

　　insertNode(node):在范围中插入节点

　　surroundContents(node):环绕范围插入内容

　　collapse(Boolean): 选区进行折叠（collapsed属性可以用来判断选区的折叠状态）

　　compareBoundaryPoints(s, range): 比较两个range是否有公共边界返回值（-1，0，1），s表示比较方式的常量值（Range.START_TO_START,　Range.START_TO_END,

　　　　Range.END_TO_END,Range.END_TO_START)

　　cloneRange(): 创建调用它的范围的副本返回的是range对象

　　detach(): 从创建范围的文档中分离出该范围，调用detach后再解除对范围的引用从而让垃圾回收机制回收其内存

事例：

　　如下html片段

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

　　创建选区对该片段进行操作

var p1 = document.getElementById("p1"),
      helloNode = p1.firstChild.firstChild,
      worldNode = p1.lastChild,
      range = document.createRange();
      range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);
range.deleteContents();

　　执行以上代码后获取结果为

<p id="p1"><b>he</b>rld!</p>

　　从该例子可以看出虽然选区中包含了b的结束标签但是删除选区后会保留完整的DOM结构