Selection
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
A Selection object represents the range of text selected by the user or the current position of the caret. Each document is associated with a unique selection object, which can be retrieved by document.getSelection() or window.getSelection() and then be examined and modified.
For general concepts related to selections, see Selection API.
Instance properties
Selection.anchorNodeRead only-
Returns the
Nodein which the selection begins. Can returnnullif selection never existed in the document (e.g., an iframe that was never clicked on). Selection.anchorOffsetRead only-
Returns a number representing the offset of the selection's anchor within the
anchorNode. IfanchorNodeis a text node, this is the number of characters within anchorNode preceding the anchor. IfanchorNodeis an element, this is the number of child nodes of theanchorNodepreceding the anchor. Selection.directionRead only-
A string describing the direction of the current selection.
Selection.focusNodeRead only-
Returns the
Nodein which the selection ends. Can returnnullif selection never existed in the document (e.g., an iframe that was never clicked on). Selection.focusOffsetRead only-
Returns a number representing the offset of the selection's focus within the
focusNode. IffocusNodeis a text node, this is the number of characters withinfocusNodepreceding the focus. IffocusNodeis an element, this is the number of child nodes of thefocusNodepreceding the focus. Selection.isCollapsedRead only-
Returns a Boolean indicating whether the selection's start and end points are at the same position.
Selection.rangeCountRead only-
Returns the number of ranges in the selection.
Selection.typeRead only-
Returns a string describing the type of the current selection.
Instance methods
Selection.addRange()-
A
Rangeobject that will be added to the selection. Selection.collapse()-
Collapses the current selection to a single point.
Selection.collapseToEnd()-
Collapses the selection to the end of the last range in the selection.
Selection.collapseToStart()-
Collapses the selection to the start of the first range in the selection.
Selection.containsNode()-
Indicates if a certain node is part of the selection.
Selection.deleteFromDocument()-
Deletes the selection's content from the document.
Selection.empty()-
Removes all ranges from the selection, leaving the
anchorNodeandfocusNodeproperties equal tonulland nothing selected. Selection.extend()-
Moves the focus of the selection to a specified point.
Selection.getComposedRanges()-
Returns an array of
StaticRangeobjects, each that represents a selection that might cross shadow DOM boundaries. Selection.getRangeAt()-
Returns a
Rangeobject representing one of the ranges currently selected. Selection.modify()-
Changes the current selection.
Selection.removeRange()-
Removes a range from the selection.
Selection.removeAllRanges()-
Removes all ranges from the selection.
Selection.selectAllChildren()-
Adds all the children of the specified node to the selection.
Selection.setBaseAndExtent()-
Sets the selection to be a range including all or parts of two specified DOM nodes, and any content located between them.
Selection.setPosition()-
Collapses the current selection to a single point.
Selection.toString()-
Returns a string currently being represented by the selection object, i.e., the currently selected text.
Specifications
| Specification |
|---|
| Selection API> # selection-interface> |
Browser compatibility
See also
Window.getSelection,Document.getSelection,Range- Selection-related events:
selectionchangeandselectstart - HTML inputs provide simpler helper APIs for working with selection (see
HTMLInputElement.setSelectionRange()) Document.activeElement,HTMLElement.focus, andHTMLElement.blur