选择

Selection 对象表示用户选择的文本范围或插入符号的当前位置。每个 document 都与一个唯一的 selection 对象关联，可以通过 document.getSelection() 或 window.getSelection() 获取该对象，然后对其进行检查和修改。

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

注意：锚点和焦点不应与选择的起始和结束位置混淆。根据选择的方向，锚点可以放置在焦点的前面或后面。

实例属性

Selection.anchorNode 只读: 返回选择开始所在的 Node。如果选择从未存在于文档中（例如，从未点击过的 iframe），则可以返回 null。
Selection.anchorOffset 只读: 返回一个数字，表示选择锚点在 anchorNode 中的偏移量。如果 anchorNode 是一个文本节点，则这是 anchorNode 中在锚点之前字符的数量。如果 anchorNode 是一个元素，则这是 anchorNode 中在锚点之前的子节点的数量。
Selection.direction 只读: 一个字符串，描述当前选择的 direction。
Selection.focusNode 只读: 返回选择结束所在的 Node。如果选择从未存在于文档中（例如，从未点击过的 iframe），则可以返回 null。
Selection.focusOffset 只读: 返回一个数字，表示选择焦点在 focusNode 中的偏移量。如果 focusNode 是一个文本节点，则这是 focusNode 中在焦点之前字符的数量。如果 focusNode 是一个元素，则这是 focusNode 中在焦点之前的子节点的数量。
Selection.isCollapsed 只读: 返回一个布尔值，指示选择的起始点和结束点是否在相同的位置。
Selection.rangeCount 只读: 返回选择中范围的数量。
Selection.type 只读: 返回一个字符串，描述当前选择的类型。

实例方法

Selection.addRange(): 将添加到选择的 Range 对象。
Selection.collapse(): 将当前选择折叠到一个点。
Selection.collapseToEnd(): 将选择折叠到选择中最后一个范围的末尾。
Selection.collapseToStart(): 将选择折叠到选择中第一个范围的开头。
Selection.containsNode(): 指示某个节点是否为选择的一部分。
Selection.deleteFromDocument(): 从文档中删除选择的内容。
Selection.empty(): 从选择中删除所有范围，使 anchorNode 和 focusNode 属性等于 null，并且没有选中任何内容。
Selection.extend(): 将选择的焦点移动到指定点。
Selection.getComposedRanges() 实验性: 返回一个 StaticRange 对象数组，每个对象都表示可能跨越 Shadow DOM 边界的 selection。
Selection.getRangeAt(): 返回一个 Range 对象，表示当前选中的范围之一。
Selection.modify(): 更改当前选择。
Selection.removeRange(): 从选择中删除一个范围。
Selection.removeAllRanges(): 从选择中删除所有范围。
Selection.selectAllChildren(): 将指定节点的所有子节点添加到选择中。
Selection.setBaseAndExtent(): 将选择设置为一个范围，包括两个指定的 DOM 节点的所有或部分内容，以及它们之间位于的任何内容。
Selection.setPosition(): 将当前选择折叠到一个点。
Selection.toString(): 返回当前由 selection 对象表示的字符串，即当前选中的文本。

备注

选择的字符串表示形式

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

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

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

选择中的多个范围

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

const selObj = window.getSelection();
const range = selObj.getRangeAt(0);

selObj 是一个 Selection 对象
range 是一个 Range 对象

如 Selection API 规范注释所述，Selection API 最初由 Netscape 创建，并允许使用多个范围（例如，允许用户从 <table> 中选择一列）。但是，除了 Gecko 之外的浏览器没有实现多个范围，并且规范还要求选择始终具有单个范围。

选择和输入焦点

选择和输入焦点（由 Document.activeElement 指示）之间存在复杂的关系，并且因浏览器而异。在跨浏览器兼容的代码中，最好分别处理它们。

Safari 和 Chrome（与 Firefox 不同）在以编程方式修改选择时，目前会聚焦包含选择的元素；这在将来可能会发生变化（请参阅 W3C 错误 14383 和 Webkit 错误 38696）。

Selection API 在编辑主机焦点更改方面的行为

Selection API 具有一个共同的行为（即，在浏览器之间共享），该行为控制在调用某些方法后编辑主机的焦点行为如何发生变化。

行为如下：

如果先前的选择在编辑主机之外，则编辑主机将获得焦点。
调用 Selection API 方法，导致使用选择范围在编辑主机内的新的 selection。
然后焦点移动到编辑主机。

注意：Selection API 方法只能将焦点移动到编辑主机，而不能移动到其他可聚焦元素（例如，<a>）。

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

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

词汇表

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

锚点: 选择的锚点是选择的起始点。使用鼠标进行选择时，锚点是文档中最初按下鼠标按钮的位置。当用户使用鼠标或键盘更改选择时，锚点不会移动。
编辑主机: 可编辑元素（例如，设置了 contenteditable 的 HTML 元素，或启用了 designMode 的文档的 HTML 子元素）。
选择的焦点: 选择的焦点是选择的结束点。使用鼠标进行选择时，焦点是文档中释放鼠标按钮的位置。当用户使用鼠标或键盘更改选择时，焦点是移动的选择的末尾。

注意：这与文档的聚焦元素不同，后者由 document.activeElement 返回。
范围: 范围是指文档中连续的一部分。范围可以包含整个节点，也可以包含节点的一部分（例如文本节点的一部分）。用户通常一次只选择一个范围，但用户也可以选择多个范围（例如，使用Control键）。范围可以从选择中作为range对象检索。范围对象也可以通过 DOM 创建，并以编程方式添加到选择或从选择中移除。

规范

规范
Selection API # 选择接口

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

Window.getSelection、Document.getSelection、Range
与选择相关的事件：selectionchange 和 selectstart
HTML 输入提供了更简单的辅助 API 用于处理选择（参见 HTMLInputElement.setSelectionRange()）
Document.activeElement、HTMLElement.focus 和 HTMLElement.blur