Range对象介绍

Range对象

Selection对象

代表用户鼠标在页面中所选取的区域。
每一个浏览器窗口中都有一个selection对象。
创建：var selection = document.getSelection();

Range对象

代表用户所选取的一段连续区域。
一个Selection对象中包含一个或者多个Range对象。Firefox中可包含多个Range对象，其他浏览器只能有一个。
创建：var range = document.createRange();
可以通过Selection对象的getRangeAt(index)方法获取Selection对象中Range对象。
通过Selection对象的rangeCount参数判断 是否选取了内容。

鼠标未点击时，该值为0。
鼠标按下时，该值为1。在Firefox上同时按下Ctrl选择多个区域时，该值为选取区域的数量。
鼠标取消选取是，该值为1，表示页面留存一个空的Range对象。

Range方法（选取）

selectNode() 选取指定的节点
selectNodeContents() 选取指定节点中的内容
deleteContents() 删除Range对象的内容
setStart(node,index)

setStartBefore(node) ：指定节点前作为Range对象的开始，Range对象包括的区域包含指定节点。
setStartAfter(node)

setEnd(node,index)

setEndBefore(node)
setEndAfter(node)

Tips：所谓“节点”可看作一个区块元素。

Range方法（获取）

cloneRange() 克隆一个Range对象。
cloneContents() 克隆一个Range对象所包含的内容，包括HTML。
extractContents() 摘取（剪切）一个Range对象。
insertNode() 在所选取的起始位置插入节点。
compareBoundaryPoints(how, soureRange) 比较两个区域的边界点，sourceRange为要与当前区域比较的区域。how值如下：

Range.START_TO_START
Range.START_TO_END ：用sourceRange的起始位置与当前区域的结束位置进行比较
Range.END_TO_START
Range.END_TO_END
sourceRange指定的临界点位于当前区域指定的临界点之前返回1，之后返回-1，相同返回0。

collapse
detach() 释放Range对象

Tips

document.getElementById()选取的是对象本身。
jQuery通过Id选取的结果是包含结果的数组。

自己的见闻周更

有兴趣的朋友感谢关注下捧捧场