【JavaScript编程】Selection对象和Range对象

说明：用户可以通过在页面上选择一段文字来创建选中区（即Selection对象），如果需要对选中区进行修改，比如：增加一个节点或是添加一段文字，这个时候就需要使用脚本操作Selection对象和Range对象来实现。

一、什么是

1、什么是Selection对象？

每一个浏览器窗口都有一个Selection对象，代表用户鼠标在页面中所选取的区域。可以通过如下代码得到一个Selection对象：

var selection = window.getSelection();

// IE浏览器
var selection = document.selection;

2、什么是Range对象

一个Range对象代表页面上的一段连续区域。可以通过如下代码创建一个空的Range对象：

// IE浏览器
var range = document.selection.createRange();

3、关系

每一个Selection对象都有一个或多个Range对象，每一个Range对象代表用户用鼠标所选取范围内的一段连续区域。

在firefox浏览器中，用户可以通过按住 ctrl 键来选取页面上的多个区域，因此一个Selection对象可能有多个Range对象。

在chrome或safari浏览器中，用户每次只能选取一段区域，所以一个Selection对象中只能有一个Range对象。

二、Selection对象

1、属性

属性	描述
rangeCount	返回该选区所包含的连续范围的数量。(在Chrome浏览器中只能有一个选区存在)
isCollapsed	返回一个布尔值，用于判断选区的起始点和终点是否在同一个位置。(也就是说可以用来判断是范围选取还是单个焦点)
anchorNode	返回该选区起点所在的节点（Node）
anchorOffset	返回一个数字，其表示的是选区起点在 anchorNode 中的位置偏移量。 如果 anchorNode 是文字节点，那么返回的就是从该文字节点的第一个字开始，直到被选中的第一个字之间的字数（如果第一个字就被选中，那么偏移量为零）。 如果 anchorNode 是一个元素，那么返回的就是在选区第一个节点之前的同级节点总数。(这些节点都是 anchorNode 的子节点)
focusNode	返回该选区终点所在的节点。
focusOffset	返回一个数字，其表示的是选区终点在 focusNode 中的位置偏移量。 如果 focusNode 是文字节点，那么选区末尾未被选中的第一个字，在该文字节点中是第几个字（从0开始计），就返回它。 如果 focusNode 是一个元素，那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。

2、方法

方法	描述
getRangeAt(rangeIndex)	获取当前selection对象下的range对象。 rangeIndex 代表range对象的序号，在chrome或safari中，用户每次只能选取一段区域，因此该值只能为0。
addRange(range)	向选区中添加一个区域
removeRange(range)	删除一个区域
removeAllRanges()	删除所有区域
deleteFromDocument()	将选区范围内的文档片段直接删除
selectAllChildren(node)	将一个节点的所有子节点包含进范围选区
containsNode(aNode,aPartlyContained)	判断某一个node是否为当前选区的一部分。 aNode：用于判断是否包含在Selection中的那个节点； aPartlyContained：为true时, 当selection包含节点aNode的一部分或全部时，containsNode()返回true；为false时, 只有当selection完全包含节点aNode时，containsNode() 才返回true。
modify(alter,direction,granularity)	操作扩展当前选区。 alter：改变类型. 传入"move"来移动光标位置，或者"extend"来扩展当前选区； direction：调整选区的方向。你可以传入"forward"或"backward"来根据选区内容的语言书写方向来调整。或者使用"left"或"right"来指明一个明确的调整方向； granularity：调整的距离颗粒度。可选值有"character"、“word”、“sentence”、“line”、“paragraph”、“lineboundary”、“sentenceboundary”、“paragraphboundary”、“documentboundary”。
toString()	返回当前选区的纯文本内容。
collapseToStart()	此方法的作用是取消当前选区，并把光标定位在原选区的最开始处，如果此时光标所处的位置是可编辑的，且它获得了焦点，则光标会在原地闪烁。
collapseToEnd()	同上至结尾处
collapse(parentNode, offset)	将范围选区折叠为一个点。 parentNode：光标落在的目标节点； offset：焦点偏移量。
extend(node,offset)	将选区的焦点移动到一个特定的位置。 node：焦点会被移至此节点内。 offset：可选，焦点会被移至 node 内的偏移位置。如果没有指定，使用 0 作为默认值。

三、Range对象

1、属性

属性	描述
text	获取选定的文本。只在IE浏览器生效
htmlText	获取选定的html。只在IE浏览器生效
collapsed	用于判断Range对象所代表的区域的开始点和结束点是否位于相同的位置，如果相同该属性值为true。
commonAncestorContainer	(node) 返回Range对象所代表的区域位于什么节点之中。
endContainer	(node) 用于返回Range对象所代表的区域的终点位于什么节点之中。
endOffset	(int) 用于返回Range对象所代表区域的终点与包含该终点的节点起点之间的距离。
startContainer	(node) 用于返回Range对象所代表区域的起点位于什么节点之中。
startOffset	(int) 用于返回Range对象所代表的区域的起点与包含该起点节点的起点之间的距离。

2、方法

方法	描述
selectNode(node)	用于将Range对象的起点指定为某个节点的起点，将Range对象的终点指定为该节点的终点。Range对象所代表的区域包含该节点。
selectNodeContents(node)	用于将Range对象的起点指定为某个节点中的所有内容的起点，将Range对象的终点指定为该节点所有内容的终点，也就是说使Range对象所代表的区域包含该节点的所有内容，但是不包括该节点标签本身。
deleteContents()	用于将Range对象中所包含的内容从页面中删除。
cloneRange()	用于对当前的Range对象进行复制，该方法返回复制的Range对象。
cloneContents()	该方法返回的是一个复制的 DocumentFragment 对象，该对象为一个容器元素，当需要追加，修改，删除或查找页面上的元素时，该方法非常有用。
extraContents()	用于将Range对象所代表区域的HTML代码克隆到一个 DocumentFragment 中，然后从页面中删除这段HTML代码。
insertNode(node)	用于将指定的节点插入到某个Range对象所代表的区域中，插入位置为Range对象所代表区域的起点位置，如果该节点已经存在于页面之中，那么该节点将被移动到Range对象所代表区域的起点处。
collapse(toStart)	toStart，是一个Boolean类型。 1、false，表示将Range对象所代表的区域的起点移动到终点处； 2、true，表示将Range对象所代表的区域的终点移动到该区域的起点处。
detach()	用于从浏览器中释放Range对象，释放之后将不能再访问该Range对象，否则将抛出脚本错误。
setStart(node, num)	用于将某个节点中的某个位置指定为Range对象所代表区域的起点位置。 num：是一个整型数值，有两种含义取决于node节点； 1、当第一个参数node所代表的节点是一个内容为一段文字的时候，那么该参数值用于指定将第几个文字结束位置作为Range对象所代表区域的起点位置(num是从0开始)； 2、当第一个参数node所代表的节点包括其他子节点时，该参数用于指定将第几个子节点的结束位置作为Range对象所代表区域的起点位置。
setEnd(node, num)	用于将某个节点中的某处位置指定为Range对象所代表区域的结束位置。num 含义同上↑
setStartBefore(node)	用于将某个节点的起始位置指定为Range对象所代表区域的起点位置。
setStartAfter(node)	用于将某个节点的终点位置指定为Range对象所代表区域的起点位置。
setEndBefore(node)	用于将某个节点的起始位置指定为Range对象所代表区域的终点位置。
setEndAfter(node)	用于将某个节点的终点位置指定为Range对象所代表区域的终点位置。

四、功能实现

【JavaScript编程】禁止复制html页面内容