DOM2局限

DOM2局限

除了IE低版本(ie8-),其他主流浏览器都支撑DOM2的局限,然则IE用其特有的体式格局完成了局限特征!
Document范例中定义了createRange(),这个要领属于document对象,起首检测浏览器是不是支撑他:
var supportRange=document.implementation.hasFeature(‘Range’,’2.0′);
var supportRange2=(typeof document.createRange==’function’);
《DOM2局限》

这是开端建立局限后在掌握台输出的,拿个中较为症结的属性来讲>_<
startContainerendContainer他们一般是指向雷同元素(前者为选区中第一个元素的父节点,后者为选区中末了一个元素的父节点)
startOffset一般即是父节点的childNodes的第一个子节点的索引,在兼容DOM的浏览器中空格算为一个文本节点。
要运用局限挑选文档中的一部份,能够运用selectNode()selectNodeContents(),他们都吸收一个参数,即局限的出发点,前者挑选本身与子,后者只挑选子。
为了更正确更轻易地掌握局限引入了一些更加轻易的要领,以下:
setStartBefore(refNode) => 将局限设置在refNode之前,即refNode是局限最先的第一个子节点,所以startContainer就是refNode的父节点
setStartAfter(refNode) => 将局限设置在refNode以后,即refNode的下一个平辈节点才是选区的第一个子节点,所以refNode不在局限以内
setEndBefore(refNode) => 将局限的尽头设置在refNode之前,即refNode的上一个平辈节点是选区的末了一个子节点,所以refNode不在局限以内
setEndAfter(refNode) => 将局限的尽头设置在refNode以后,即refNode是选区的末了一个子节点,所以refNode在局限以内

庞杂操纵:

 setStart(node, offset)    =>     设置出发点的位置,node是对startContainer的援用,偏移则是startOffset
 setEnd(node, offset)      =>     设置完毕点的位置,node是对endContainer的援用,偏移则是startOffset

《DOM2局限》
这段代码末了剩下Herld 虽然把局限内的文本删了,然则DOM构造依然不会变。
deleteContents()相似的要领有extractContents(),但后者这个要领会返回选区的内容,因而能够应用他来插进去到页面的其他位置。
cloneContents()这个要领,假如只是要建立一个局限的副本而不去删除或移除局限的内容能够用他,语法称号代表用法,即克隆内容。

插进去DOM局限中的内容:
运用insertNode()要领能够在局限选区最先处插进去一个节点
《DOM2局限》

《DOM2局限》

强调局限选区差别后续操纵差别!
在运用完局限以后,最好挪用detach()要领,清算局限,接纳内存,一旦星散了局限就不能再运用了。
range.detach(); // 从文档中星散
range=null; // 消除援用

IE8及更低版本中的DOM局限

正确来讲IE高版本以及低版本都支撑文本局限,是IE独占的特征,其他浏览器不支撑,语法称号代表用法,所以重要用于文本。
《DOM2局限》

挑选某一地区用要领findText(),他会找到第一次涌现的文本,然则他第二个参数假如为负值就会找末了一个婚配胜利的文本,正值就会找到第一个婚配胜利的文本,这也就说清楚明了图中为何找到hELLO而不是别的两个的缘由了!
当中的变量found只要在婚配到文本时就会返回true,婚配不辨别大小写在某些操纵上或许会带来轻易,能够用属性text,来猎取局限选中的文本。
DOM局限有selectNode()而IE中有=>moveToElementText() =>这个要领吸收一个DOM元素,并挑选该元素的一切文本,包括HTML标签。假如在局限选区中包括HTML标签能够用属性htmlText读取局限全部内容。
属性text能够读取文本也能够修正文本,以下:
《DOM2局限》

《DOM2局限》

《DOM2局限》

可见hELLO的部份已被替换成hello,但标签没有被替换,假如想把标签替换掉能够用pasteHTML(),比方:range1.pasteHTML(‘hello‘);
然则上述做法会引起争执,不首倡!
IE中运用要领duplicate()复制文本局限,犹如cloneContents(),新建立的局限带有原局限雷同的属性。例:var range=range.duplicate();

这是我个人的一点总结,有些属性要领未说起的!

    原文作者:yomtaaa
    原文地址: https://segmentfault.com/a/1190000002920802
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞