range 对象是选中的一段区域，包括一个开始节点和一个结束节点（anchorNode focusNode）通过节点和offset可以构造一个选区，进一步操作选区的文本内容。下面是常用的API，参考整理于MDN。
Selection 学习
Selection对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。要获取用于检查或修改的Selection对象，请调用 window.getSelection()。
用户可能从左到右（与文档方向相同）选择文本或从右到左（与文档方向相反）选择文本。anchor指向用户开始选择的地方，而focus指向用户结束选择的地方。如果你使用鼠标选择文本的话，anchor 就指向你按下鼠标键的地方，而focus就指向你松开鼠标键的地方。anchor 和 focus 的概念不能与选区的起始位置和终止位置混淆，因为anchor指向的位置可能在focus指向的位置的前面，也可能在focus指向位置的后面，这取决于你选择文本时鼠标移动的方向（也就是按下鼠标键和松开鼠标键的位置）。
Selection对象所对应的是用户所选择的 ranges （区域），俗称拖蓝。默认情况下，该函数只针对一个区域，我们可以这样使用这个函数：
var selObj = window.getSelection(); var range = selObj.getRangeAt(0);
-
selObj 被赋予一个Selection对象 -
range被赋予一个 Range 对象
调用 Selection.toString() 方法会返回被选中区域中的纯文本。要求变量为字符串的函数会自动对对象进行该处理，例如：
var selObj = window.getSelection(); window.alert(selObj);
术语表
本页面使用的其他关键词汇：
-
锚点（anchor）
扫描二维码关注公众号，回复： 4607596 查看本文章
锚指的是一个选区的起始点（不同于HTML中的锚点链接，译者注）。当我们使用鼠标框选一个区域的时候，锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时，锚点是不会变的。
-
焦点（focus）
选区的焦点是该选区的终点，当您用鼠标框选一个选区的时候，焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标，焦点的位置会随着改变。
-
范围（range）
范围指的是文档中连续的一部分。一个范围包括整个节点，也可以包含节点的一部分，例如文本节点的一部分。用户通常下只能选择一个范围，但是有的时候用户也有可能选择多个范围（例如当用户按下Control按键并框选多个区域时，Chrome中禁止了这个操作，译者注）。“范围”会被作为
range对象返回。Range对象也能通过DOM创建、增加、删减。
属性
-
返回该选区起点所在的节点（
Node）。 -
返回一个数字，其表示的是选区起点在
anchorNode中的位置偏移量。如果 anchorNode 是文字节点，那么返回的就是从该文字节点的第一个字开始，直到被选中的第一个字之间的字数（如果第一个字就被选中，那么偏移量为零）。如果 anchorNode 是一个元素，那么返回的就是在选区第一个节点之前的同级节点总数。(这些节点都是 anchorNode 的子节点) -
返回该选区终点所在的节点。
-
返回一个数字，其表示的是选区终点在
focusNode中的位置偏移量。如果 focusNode 是文字节点，那么选区末尾未被选中的第一个字，在该文字节点中是第几个字（从0开始计），就返回它。如果 focusNode 是一个元素，那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。 -
返回一个布尔值，用于判断选区的起始点和终点是否在同一个位置。
-
返回该选区所包含的连续范围的数量。
方法
-
返回选区开始的节点（
Node）。 -
将当前的选区折叠为一个点。
-
将选区的焦点移动到一个特定的位置。
-
修改当前的选区。
-
将当前的选区折叠到起始点。
-
将当前的选区折叠到最末尾的一个点。
-
将某一指定节点的子节点框入选区。
-
一个区域（
Range）对象将被加入选区。 -
从选区中移除一个区域。
-
将所有的区域都从选区中移除。
-
从页面中删除选区中的内容。
-
当键盘的朝向发生改变后修改指针的Bidi优先级。
-
返回当前选区的纯文本内容。
-
判断某一个node是否为当前选区的一部分。