Selection对象方法属性总结

用途

在浏览器环境中，可以使用document.getSelection方法获取到Selection对象，Selection对象常用于编辑器等光标操作，用于选取文字段落或者定位光标选取范围内的节点或者文字操作；

重点划线

1. 锚点(anchor)

锚指的是一个选区的起始点（不同于HTML中的锚点链接，译者注）。当我们使用鼠标框选一个区域的时候，锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时，锚点是不会变的；(归纳为范围选取时开始选取的位置）

2. 焦点(focus)

选区的焦点是该选区的终点，当您用鼠标框选一个选区的时候，焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标，焦点的位置会随着改变。(归纳为范围选取时结束的位置)

3. 范围(range)

范围指的是文档中连续的一部分。一个范围包括整个节点，也可以包含节点的一部分，例如文本节点的一部分。用户通常下只能选择一个范围，但是有的时候用户也有可能选择多个范围（例如当用户按下Control按键并框选多个区域时，Chrome中禁止了这个操作，译者注）。“范围”会被作为range
对象返回。Range对象也能通过DOM创建、增加、删减。range对象也是Selection对象中的重点。

属性

1. anchorNode

返回该选区起点所在的节点（Node
）。
2.anchorOffset
返回一个数字，其表示的是选区起点在 anchorNode
中的位置偏移量。
如果 anchorNode 是文字节点，那么返回的就是从该文字节点的第一个字开始，直到被选中的第一个字之间的字数（如果第一个字就被选中，那么偏移量为零）。
如果 anchorNode 是一个元素，那么返回的就是在选区第一个节点之前的同级节点总数。(这些节点都是 anchorNode 的子节点)

3. focusNode

返回该选区终点所在的节点。

4. focusOffset

返回一个数字，其表示的是选区终点在 focusNode
中的位置偏移量。
如果 focusNode 是文字节点，那么选区末尾未被选中的第一个字，在该文字节点中是第几个字（从0开始计），就返回它。
如果 focusNode 是一个元素，那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。

5. isCollapsed

返回一个布尔值，用于判断选区的起始点和终点是否在同一个位置。(也就是说可以用来判断时范围选取还是单个焦点)

7. rangeCount

返回改选去所包含的连续范围的数量。(意义不大，在Chrome浏览器中只能有一个选区存在)

方法

1. getRangeAt

获取当前Selection对象下的range对象，rang对象在焦点操作中尤为重要(下一篇文章主要总结range对象)

2. collapse(parentNode, offset)

将范围选区折叠为一个点
parentNode 光标落在的目标节点
offset 焦点偏移量

3. extend(node,offset)

貌似兼容性不太友好 而且没用过，了解后再总结

4. modify(alter,direction,granularity)

操作扩展当前选区
alter
改变类型. 传入"move"来移动光标位置，或者"extend"来扩展当前选区。
direction
调整选区的方向。你可以传入"forward"或"backward"来根据选区内容的语言书写方向来调整。或者使用"left"或"right"来指明一个明确的调整方向。
granularity
调整的距离颗粒度。可选值有"character"、"word"、"sentence"、"line"、"paragraph"、"lineboundary"、"sentenceboundary"、"paragraphboundary"、"documentboundary"。
Examples：

var selection = window.getSelection();
selection.modify("extend", "forward", "word");

5. collapseToStart()

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

6. collapseToEnd()

同上至结尾处

7. selectAllChildren(node)
   将一个节点的所有子节点包含进范围选区
   Examples:

footer = document.getElementById("footer");
window.getSelection().selectAllChildren(footer);
/* Everything inside the footer is now selected *

8. addRange(range)

向选区中添加一个区域
range可通过document.createRange()创建

9. removeRange(range)
   删除一个区域

/* 通过设计一段js代码，我们可以获得多个区域，
 * 这段代码可以移除除了第一个区域之外的所有区域。
 * （此代码在Chrome中不生效，因为Chrome当中只能
 * 选择一个选区，哎我为什么要在 Mozilla 的网站上
 * 说这个？译者注）*/
s = window.getSelection();
if(s.rangeCount > 1) {
 for(var i = 1; i < s.rangeCount; i++) {
  s.removeRange(s.getRangeAt(i));
 }
}```
10. deleteFromDocument()
> 将选区范围内的文档片段直接删除
11. toString()
> 返回当前选区的纯文本内容。
12. containsNode(aNode,aPartlyContained)
> 判断某一个node是否为当前选区的一部分。
aNode
用于判断是否包含在Selection中的那个节点
aPartlyContained
当此参数为true时, 当selection包含节点aNode的一部分或全部时，containsNode()返回true.
当此参数为false时, 只有当selection完全包含节点aNode时，containsNode() 才返回true.
13. selectionLanguageChange()
> 当键盘的朝向发生改变后修改指针的Bidi优先级。？？？ 看不懂

#  最后
各个浏览器对Selection对象兼容各有不同，属于大坑，使用时多注意