Selection

实例属性

Selection.anchorNode 只读

返回选择开始所在的 Node。如果文档中从未存在过选择（例如，一个从未被点击过的 iframe），则可能返回 null。

Selection.anchorOffset 只读

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

Selection.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.getRangeAt()

返回一个 Range 对象，表示当前选择的一个范围。

Selection.modify()

更改当前选择。

Selection.removeRange()

从选择中移除一个范围。

Selection.removeAllRanges()

从选择中移除所有范围。

Selection.selectAllChildren()

将指定节点的**所有**子节点添加到选择中。

Selection.setBaseAndExtent()

将选择设置为一个范围，该范围包含两个指定 DOM 节点的所有或部分内容，以及它们之间的任何内容。

Selection.setPosition()

将当前选择折叠到单个点。

Selection.toString()

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

注意

Selection 的字符串表示

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

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 之外的浏览器并未实现多范围支持，并且该规范还要求 selection 始终只有一个范围。

Selection 和输入焦点

Selection 和输入焦点（由 Document.activeElement 指示）之间存在复杂的关系，具体取决于浏览器。在跨浏览器兼容的代码中，最好将它们分开处理。

Safari 和 Chrome（与 Firefox 不同）目前在以编程方式修改 selection 时会聚焦包含 selection 的元素；这未来可能会改变（请参阅 W3C bug 14383 和 WebKit bug 38696）。

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

Selection API 具有一种常见的行为（即浏览器之间共享），它规定了在调用某些方法后，编辑主机的焦点行为如何变化。

行为如下：

1. 如果之前的 selection 在编辑主机之外，则编辑主机获得焦点。
2. 调用 Selection API 方法，导致创建了一个新的 selection，其 selection 范围在编辑主机内部。
3. 焦点然后会转移到编辑主机。

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

• Selection.collapse()
• Selection.collapseToStart()
• Selection.collapseToEnd()
• Selection.extend()
• Selection.selectAllChildren()
• Selection.addRange()
• Selection.setBaseAndExtent()

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

• Range.setStart()
• Range.setEnd()
• Range.setStartBefore()
• Range.setStartAfter()
• Range.setEndBefore()
• Range.setEndAfter()
• Range.collapse()
• Range.selectNode()
• Range.selectNodeContents()

术语表

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

anchor (锚点)

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

editing host (编辑主机)

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

focus of a selection (selection 的焦点)

Selection 的焦点是选择的终点。使用鼠标进行选择时，焦点是释放鼠标按钮的文档位置。当用户使用鼠标或键盘更改选择时，焦点是移动的选择的末尾。

注意：这与文档的焦点元素不同，后者由 document.activeElement 返回。

range

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

规范

浏览器兼容性

另见

• Window.getSelection、Document.getSelection、Range
• 与 Selection 相关的事件：selectionchange 和 selectstart
• HTML 输入提供了更简单的辅助 API 来处理 selection（请参阅 HTMLInputElement.setSelectionRange()）。
• Document.activeElement、HTMLElement.focus 和 HTMLElement.blur