js dom中的 Range对象详解(createRange,selectNodeContents,startContainer,startOffset,endContainer,endOffset)

我来纠错
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。
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():复制文本范围。创建原范围的一个副本。
发送
热门关键词:
命令
知识类型:
标题描述:
详细解答:

提交审核您编辑的知识会经过 前端大牛 人工审核。