M2级遍历和范围Range

DOM中的范围

DOM2在document类中定义了createRange()方法。在兼容DOM的浏览器中,这个方法属于document对象。使用hasFeature()或者直接检测该方法,都可以确定浏览器是否支持范围。

var supportsRange = document.implemention.hasFeature("Range","2.0");
var alsoSupportsRange = (typeof documnet.createRange == "function");

如果浏览器支持range,则可以使用createRange来直接创建DOM范围

var range = document.createRange();
与节点类似,新创建的范围也直接与创建它的文档关联在一起,不能用于文档。创建了范围之后,接下来就可以使用它在后台选择文档中的特定部分。而创建文档范围并设置了其位置之后,还可以针对范围的内容执行很多种操作,从而实现对底层DOM树的更精细的控制。

每个范围由一个range类型的实例表示,这个实例拥有很多的属性和方法。
startContainer 包含范围起点的节点
startOffset
endContainer 包含范围终点的节点
endOffset
commonAncestorContainer: startContainer和endContainer共同的祖先节点在文档树中最深的位置。

为了更精确地控制将哪些节点包含在范围中,还可以使用下列方法

setStartBefore(refNode)将范围起点设置在refNode之前,因此,refNode也就是范围选区中的第一个子节点。同时会将startContainer设置为refNode.parentNode,将startOffset属性设置为refNode在其父节点的childNodes集合中的索引。
setStartAfter
setEndBefore
setEndAfter

原文地址:https://www.cnblogs.com/yingzi/p/2624124.html