dom中的selection

selection

A Selection object represents the range of text selected by the user or the current position of the caret. To obtain a Selection object for examination or manipulation, call window.getSelection().

在浏览器中选中一段文本, 调用 window.getSelection(),就会获得一个selection对象

selection对象属性

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  anchorNode: text    // 鼠标按下时所在的文本节点
  anchorOffset: 3     // 鼠标按下时选中文本的第一个字符, 到文本节点第一个字符的偏移量
  baseNode: text      // 同anchorNode
  baseOffset: 3       // 同anchorOffset
  extentNode: text    // 同focusNode
  extentOffset: 8     // 同focusOffset
  focusNode: text     // 鼠标松开时所在的文本节点
  focusOffset: 8      // 鼠标松开时选中文本的最后一个字符, 到文本节点第一个字符的偏移量
  isCollapsed: false  // Returns a Boolean indicating whether the selection's start and end points are at the same position. 
  rangeCount: 1       // Returns the number of ranges in the selection.
  type: "Range"       // Returns a DOMString describing the type of the current selection.
}

selection对象方法

getRangeAt
返回选区包含的指定区域（Range）的引用。

1
2
3
4
5
6
7
8
9
// Range就是选区
{
  collapsed: false,                 // 只有光标时为true, 选区为false
  commonAncestorContainer: text,    // 返回完整包含 startContainer 和 endContainer 的、最深一级的节点
  endContainer: text,               // 返回包含 Range 终点的节点。
  endOffset: 8,                     // 返回一个表示 Range 终点在 endContainer 中的位置的数字。
  startContainer: text,             // 返回包含 Range 开始的节点。
  startOffset: 3                    // 返回一个表示 Range 起点在 startContainer 中的位置的数字。
}

collapse
将当前的选区折叠为一个点。

extend
将选区的焦点移动到一个特定的位置。

modify
修改当前的选区。

collapseToStart
将当前的选区折叠到起始点。

collapseToEnd
将当前的选区折叠到最末尾的一个点。