Microfaster, 让我们略微加速

JS 之DOM range对象

2017-04-28 10:03:37 lvesu (2846阅读)

标签 HTML/CSS/XML JavaScript

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

http://www.cnblogs.com/zourong/p/4800922.html


北京半月雨文化科技有限公司.版权所有 京ICP备12026184号