JS中的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 高级程序设计》


« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。