Selection - 表示用户选择的文本范围或插入符号的当前位置

Selection 对象表示用户选择的文本范围或插入符号的当前位置。要获取用于检查或操作的 Selection 对象，请调用 window.getSelection()。

用户可以从左到右 (按文档顺序) 或从右到左 (与文档顺序相反) 进行选择。锚点是用户开始选择的位置，而焦点是用户结束选择的位置。如果使用桌面鼠标进行选择，则锚点放置在按下鼠标按钮的位置，焦点放置在释放鼠标按钮的位置。

注意： 锚点和焦点不应与所选内容的开始和结束位置混淆。锚点可以放置在焦点之前，反之亦然，具体取决于您选择的方向。

属性

Selection.anchorNode 只读

返回选择开始的 Node。如果文档中不存在所选内容 (例如，从未点击过的 iframe)，则可以返回 null 。

Selection.anchorOffset 只读

返回一个数字，该数字表示所选内容的锚点在 anchorNode 中的偏移量。如果 anchorNode 是文本节点，则这是锚点前面的 anchorNode 内的字符数。如果 anchorNode 是一个元素，则这是锚前面的 anchorNode 的子节点数。

Selection.focusNode 只读

返回选择结束的 Node。如果文档中不存在选择 (例如，在从未点击过的 iframe 中)，则返回 null 。

Selection.focusOffset 只读

返回一个数字，该数字表示所选内容的锚点在 focusNode 内的偏移量。如果 focusNode 是文本节点，则这是焦点前面的 focusNode 内的字符数。如果 focusNode 是一个元素，则这是焦点前面的 focusNode 的子节点数。

Selection.isCollapsed 只读

返回一个布尔值，指示所选内容的起始点和结束点是否在同一位置。

Selection.rangeCount 只读

返回所选内容中的范围数。

Selection.type 只读

返回一个 DOMString，描述当前所选内容的类型。

方法

Selection.addRange()

将添加到所选内容的 Range 对象。

Selection.collapse()

将当前选定内容折叠为一个点。

Selection.collapseToEnd()

将选定内容折叠到选定内容中最后一个范围的末尾。

Selection.collapseToStart()

将选定内容折叠到选定内容中第一个范围的起点。

Selection.containsNode()

表示某个节点是否为选择的一部分。

Selection.deleteFromDocument()

从文档中删除所选内容。

Selection.extend()

将选定内容的焦点移动到指定点。

Selection.getRangeAt()

返回表示当前选定范围之一的 Range 对象。

Selection.modify()

更改当前选择。

Selection.removeRange()

从所选内容中删除一个范围。

Selection.removeAllRanges()

从所选内容中删除所有范围。

Selection.selectAllChildren()

将指定节点的所有子节点添加到所选内容。

Selection.setBaseAndExtent()

将所选内容设置为包括两个指定 DOM 节点的全部或部分以及位于它们之间的任何内容的范围。

Selection.toString()

返回当前由选择对象表示的字符串，即当前选定的文本。

注意

获取选定内容中的字符串

调用 Selection.toString() 方法将返回所选内容中包含的文本，例如：

var selObj = window.getSelection();
window.alert(selObj);

请注意，使用 Selection 对象作为 window.alert 的参数将调用该对象的 toString 方法。

选定内容中的多个范围

选择对象表示用户已选择的 Range。通常，它只包含一个范围，按如下方式访问：

var selObj = window.getSelection();
var range  = selObj.getRangeAt(0);
  • selObj 是一个 Selection 对象
  • range 是一个 Range 对象

正如 Selection API 规范所指出的，选择 API 最初是由 Netscape 创建的，并且允许多个范围 (例如，允许用户从 <table> 中选择一列)。然而，除 Gecko 之外的其他浏览器没有实现多个范围，并且规范还要求选择始终具有单个范围。

选择和输入焦点

选择和输入焦点 (由 Document.activeElement 表示）具有复杂的关系，该关系因浏览器而异。在跨浏览器兼容的代码中，最好将它们分开处理。

Safari 和 Chrome（与 Firefox 不同）目前在以编程方式修改选择时将焦点放在包含选择的元素上；这在未来可能会改变（参见 W3CBug 14383 和 WebKit bug 38696）。

Selection API 在编辑宿主焦点更改时的行为

选择 API 有一个共同的行为 (即所有浏览器一致)，该行为控制在调用某些方法后编辑宿主的焦点行为如何更改。

其行为如下：

  1. 如果上一次选择在编辑宿主之外，则编辑宿主获得焦点。
  2. 调用 Selection API 方法，使得使用编辑宿主内部的选择范围执行新的选择。
  3. 然后焦点移到编辑宿主。

**注意：**选择 API 方法只能将焦点移动到编辑宿主，而不能移动到其他可聚焦的元素 (例如，<a>)。

上述行为适用于使用以下方法执行的选择：

以及当使用以下方法修改 range 时：

词汇表

本节中使用的其他关键术语。

锚点

选择的锚点是选择的起点。使用鼠标进行选择时，锚点是最初在文档中按下鼠标按钮的位置。当用户使用鼠标或键盘更改选择时，锚点不会移动。

编辑宿主

可编辑元素（例如，设置了contenteditable 的 HTML 元素，或启用了 designMode 的文档的 HTML 子元素）。

选定内容的焦点

选择的焦点是选择的终点。使用鼠标进行选择时，焦点是文档中释放鼠标按钮的位置。当用户使用鼠标或键盘更改选择时，焦点是移动后结束的地方。

注意： 这与文档的焦点元素不同，它是由 Docent.activeElement 返回的。

范围

范围是文档的连续部分。范围可以包含整个节点以及节点的一部分（如文本节点的一部分）。用户通常一次只选择一个范围，但用户也可以选择多个范围 (例如，使用 Control 键)。范围可以作为 Range 对象从所选内容中检索。也可以通过 DOM 创建 Range 对象，并以编程方式从选择中添加或删除。

规范

规范
Selection API # selection-interface

桌面浏览器兼容性

暂无兼容数据

相关链接