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
最新评论: