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;//解除引用