一聚教程网:一个值得你收藏的教程网站

热门教程

js dom 详细应用教程一

时间:2022-07-02 13:50:01 编辑:袖梨 来源:一聚教程网


 
2级DOM定义了一个createRange()方法,如果是按照DOM此标准的浏览器(IE并不是支持此标准的,但是IE里的属性或方法却远比标准中定义的多得多),它属于document对象,所以创建一个range对象要这样做:
var oRange = document.createRange();
如果你要检测你的浏览器是否支持此标准Range对象,可以用hasFeature()方法来检测:
var supportsDOMRanges = document.implementation.hasFeature("Range", "2.0");
if (supportsDOMRange) {
    var oRange = document.createRange();
    //range code here
}
Range对象进行简单的选择
最简单用Range进行选择,用selectNode()或者selectNodeContents()方法,这两个方法只有一个接收参数,一个DOM节点。
selectNode()方法选择全部节点,包括它的孩子,而selectNodeContents()选择的节点只是它的孩子。如

Hello World



oRange1和oRange2包含上面所说的两种方法,但是看了下面的示图相信你能很快明白这两个方法的区别:
 
当你创建了一个Range对象时,Range实例就会有以下的属性:
startContainer — 返回range对象从何开始的节点对象(父节点的第一个节点)
startOffset — 返回Range开始的偏移量(offset),如果startContainer是一个文本节点,注释节点,或者是CDATA节点,这个属性返回文本的偏移量,否则返回第一个节点的索引。
endCOntainer — 返回Range对象最后一个节点对象(父节点的最后一个节点)
endOffset — 返回Range结束时的偏移量(offset)特性与startOffset相同。
commonAncestorContainer — 返回第一个包含该Range对象的节点。
注:这些属性均为只读属性(read-only),startOffset和endOffset将在下文中有较详细的解释。
下面这段代码将说明这些属性,请在Mozilla firefox里运行(支持此标准的浏览器——DOM2级,IE里将无效):

DOM Range Example


Hello World


       







oRange1
Start Container:
   

Start Offset:
   

End Container:
   

End Offset:
   

Common Ancestor:
   
   



oRange2
Start Container:
   

Start Offset:
   

End Container:
   

End Offset:
   

Common Ancestor:
   





上面的代码将不作注释了,有什么问题,在评论中留言。
Range中还有一些其它的方法:
setStartBefore(node) — 设置Range的相对于node节点的起始位置
setStartAfter(node) — 同上
setEndBefore — 设置Range的相对于node节点的结束位置
setEndAfter — 同上

热门栏目