Selection 对象

获取 Selection 对象

var selObj = window.getSelection();
//或者 document.getSelection();

Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。

浏览器支持：IE9+ 及其他主流浏览器都支持。

术语

• 锚点（anchor）：锚指的是一个选区的起始点（不同于HTML中的锚点链接）。当我们使用鼠标框选一个区域的时候，锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时，锚点是不会变的。
• 焦点（focus）：选区的焦点是该选区的终点，当您用鼠标框选一个选区的时候，焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标，焦点的位置会随着改变。
• 范围（range）：范围指的是文档中连续的一部分。一个范围包括整个节点，也可以包含节点的一部分，例如文本节点的一部分。用户通常下只能选择一个范围，但是有的时候用户也有可能选择多个范围（例如当用户按下Control按键并框选多个区域时，Chrome中禁止了这个操作）。“范围”会被作为 Range 对象返回。Range 对象也能通过DOM创建、增加、删减。

用户可能从左到右（与文档方向相同）选择文本或从右到左（与文档方向相反）选择文本。anchor 指向用户开始选择的地方，而focus指向用户结束选择的地方。如果你使用鼠标选择文本的话，anchor 就指向你按下鼠标键的地方，而 focus 就指向你松开鼠标键的地方。anchor 和 focus 的概念不能与选区的起始位置和终止位置混淆，因为 anchor 指向的位置可能在 focus 指向的位置的前面，也可能在 focus 指向位置的后面，这取决于你选择文本时鼠标移动的方向（也就是按下鼠标键和松开鼠标键的位置）。

Selection 对象与 Range 对象关系
Selection对象所对应的是用户所选择的 ranges （区域），俗称拖蓝。默认情况下，该函数只针对一个区域。

var selObj = window.getSelection();  //Selection 对象
var range  = selObj.getRangeAt(0);   //Range 对象

属性

anchorNode
返回该选区起点所在的节点（Node）。

anchorOffset
返回一个数字，其表示的是选区起点在 anchorNode 中的位置偏移量。

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

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

focusOffset
返回一个数字，其表示的是选区终点在 focusNode 中的位置偏移量。

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

isCollapsed
返回一个布尔值，用于判断选区的起始点和终点是否在同一个位置。

rangeCount
返回该选区所包含的连续范围的数量。

例：

<div>
  <span>A</span>
  <span>B</span>
  <div>
    <span>C</span>
    DE
    <span>FGHI</span>
    <span>J</span>
    <span>K</span>
  </div>
  <span>L</span>
  <span>M</span>
  OPQRST
</div>
<script>
var sel = window.getSelection();
document