JS 之DOM range对象

DOM范围

DOM中的range对象是DOM2中新定义的接口。通过这个对象可以选择文档中的某个区域，而不必考虑节点的界限。

 

创建范围

document.createRange()创建一个范围，这个范围是range类型的实例。包含下面这些属性和方法。

startContainer：包含范围起点的节点（选区中第一个节点的父节点）。

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

endContainer：包含范围终点的节点（选区中最后一个节点的父节点）。

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

 

范围选择

selectNode()和selectNodeContents()方法用来选择文档中的某一部分。

var range = document.createRange();

range.selectNode(node)   参数为node节点，把整个node节点的信息，包括子节点中的内容填充到范围range内。

range.selectNodeContents(node)   参数为node节点，把node节点的子节点信息填充到范围range内。

 

操作范围

在创建范围时，内部会为这个范围创建一个文档片段，范围所属的全部节点会被添加到这个文档片段中。创建范围后，就可以对范围的的内容进行操作了。

deleteContents()：从文档中彻底删除范围所包含的内容。

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

var range = document.createRange();
range.selectNode(sec1);
range.deleteContents();   //删除sec1节点

extractContents()：从文档中移除范围选区。这个方法的返回值是移除的片段，利用这个返回值，可以把这个片段插入到页面的其他地方。

var sec1 = document.getElementById('sec1');
var sec2 = document.getElementById('sec2');

var range = document.createRange();
range.selectNode(sec1);      //创建范围的内容
var fragment = range.extractContents();       //从文档中移除范围选区
sec2.parentNode.appendChild(fragment);      //在页面的某处插入范围中被移除的节点

cloneRange()：复制范围，创建调用它的范围的副本。

var newRange = range.cloneRange();

detach()：从范围文档中分类该范围，也就是清理范围。

range.detach();

range = null;

 

IE中的范围

IE不支持DOM的range范围，但是支持textRange文本范围，文本范围主要处理的是文本。

 

创建范围

document.body.createTextRange();

 

范围选择

findText()方法：找到第一次出现的给定文本，并将范围移过来环绕文本。如果找到文本返回true，否则返回false.

eg:

var range = document.body.createTextRange();

var isFound = range.findText('aa');    //如何找到返回true，否则返回false

var text = range.text    //输出aa

与DOM中selectNode()方法最接近的是moveToElementText(),接受一个参数：节点名。选择这个节点的所有内容填充到范围里。

 

操作范围

在IE中，操作范围中的内容可以使用text属性和pasteHTML()方法。通过text属性可以取得范围中的内容文本，也可以通过这个属性来设置内容文本。要向范围中插入html代码，则使用pasteHTML()方法。

duplicate()：复制文本范围。创建原范围的一个副本。

 

总结自：《javascript 高级程序设计》