关于浏览器的Selection对象，以及window.getSelection()的API用法

Selection 对象就是用户选择的文本范围或插入符号的位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。具有以下属性和方法。

 1、anchorNode

　　只读属性，返回选区开始位置所属的节点。用户可能从左往右框选，也可能从右往左框选。但是锚点是不会移动的。（也就是鼠标按下所在的节点，如果没有选区，就是光标所在位置的节点）

2、anchorOffset

　　只读属性，返回选区的锚节点(anchorNode)起点偏移量的数字。返回值从零开始计数，如果选区从锚节点(anchorNode)的第一个字符开始，返回值为 0。

　　也就是鼠标按下时所在位置，到节点(ahchorNode)起始位置字符个数。

　　

 

3、focusNode

　　只读属性，返回所选内容的结束位置部分所属的节点。

4、focusOffset

　　只读属性，返回选区终点在焦点(focusNode)中的偏移量(参考anchorOffset)。

5、isCollapsed

　　只读属性，返回一个布尔值用于描述选区的起点和终点是否在同一个位置(表明是否进行了框选)。

6、rangeCount

　　只读属性。这个值一般情况下都是1，除非在一个新打开的页面没有任何点击之前直接获取rangeCount才会是0。但是可以用js使选区包含多个range。

7、type

　　只读属性，有三个值。

　　None:当前没有任何选择。

　　Caret:选区已折叠，即光标在字符之间，没有任何选区。

　　Range:选择的是一个范围，即有选区。

8、getRangeAt()

　　方法，返回一个包含当前选区内容的区域对象。也就是range。range会在下面详细讲到。

9、collapse()

　　方法，可以收起当前选区到一个点。文档不会发生改变。如果选区的内容是可编辑的并且焦点落在上面，则光标会在该处闪烁。

　　window.getSelection().collapse(parentNode, offset)

　　parentNode 光标落在的目标节点。

　　offset 落在节点的偏移量。

 10、extend()

　　方法，移动选中区的焦点到指定的点。选中区的锚点不会移动。选中区将从锚点开始到新的焦点，不论方向。

　　sel.extend(node, offset)

　　node 目标节点。 offset 偏移位置，默认为0。

 　　在这里，我写了一个定时器。图1 是页面刷新之后框选的内容，图2 是5秒之后框选的内容，可以看到，锚点没有发生移动，选中的焦点的位置发生了变化，到我传入的node节点上面。

11、modify()

　　方法，但是是非标准的，不建议在生产环境使用。这里不展开说。可参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Selection/modify

12、collapseToStart()

　　方法，取消选区，并把光标定位在原选区的最开始处，如果此时光标所处的位置是可编辑的，且它获得了焦点，则光标会在此处闪烁。

　　注意：这个方法并不会在乎框选的方向，无论你是从左往右，还是从右往左框选。

 

 13、collapseToEnd()

　　方法，取消当前选区，并把光标定位在原选区的最末尾处，如果此时光标所处的位置是可编辑的，且它获得了焦点，则光标会在原地闪烁。

14、selectAllChildren()

　　方法，把指定元素的所有子元素设为选中区域，并取消之前的选中区域。

　　window.getSelection().selectAllChildren(parentNode)

　　所有 parentNode 元素的子元素会被设为选中区域，parentNode 本身除外。

15、addRange()  removeRange()  removeAllRanges() 是关于range的方法，另开一个单讲。

16、deleteFromDocument()

　　方法，从页面中删除选中的内容。

17、toString()

　　方法，返回当前选区的纯文本内容。

18、containsNode()

　　方法，判断某一个Node是否为当前选区的一部分。