Selection
The Selection API controls and modifies user text selections within the page.
Overview
The Selection API controls and modifies user text selections within the page.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 90 | 90 | 69 | 14.1 | 90 | 14.5 | |
| The read-only collapsed property of the AbstractRange interface returns true if the range's start position and end position are the same. | 90 | 90 | 69 | 14.1 | 90 | 14.5 |
| The read-only endContainer property of the AbstractRange interface returns the Node in which the end of the range is located. | 90 | 90 | 69 | 14.1 | 90 | 14.5 |
| The endOffset property of the AbstractRange interface returns the offset into the end node of the range's end position. | 90 | 90 | 69 | 14.1 | 90 | 14.5 |
| The read-only startContainer property of the AbstractRange interface returns the Node in which the start of the range is located. | 90 | 90 | 69 | 14.1 | 90 | 14.5 |
| The read-only startOffset property of the AbstractRange interface returns the offset into the start node of the range's start position. | 90 | 90 | 69 | 14.1 | 90 | 14.5 |
| The Document.createRange() method returns a new Range object whose start and end are offset 0 of the Document object on which it was called. | 1 | 12 | 1 | 1 | 18 | 1 |
| The getSelection() method of the Document interface returns the Selection object associated with this document, representing the range of text selected by the user, or the current position of the caret. | 2 | 12 | 57 | 4 | 18 | 3.2 |
| The selectionchange event of the Selection API is fired when the current Selection of a Document is changed. | 11 | 12 | 52 | 5.1 | 18 | 5 |
| The selectionchange event of the Selection API is fired when the text selection within an input element is changed. This includes both changes in the selected range of characters, or if the caret moves. | 127 | 127 | 92 | 18 | 127 | 18 |
| The selectionchange event of the Selection API is fired when the text selection within a textarea element is changed. This includes both changes in the selected range of characters, or if the caret moves. | 127 | 127 | 92 | 18 | 127 | 18 |
| The selectstart event of the Selection API is fired when a user starts a new selection. | 1 | 12 | 52 | 1.3 | 18 | |
| The Range interface represents a fragment of a document that can contain nodes and parts of text nodes. | 1 | 12 | 1 | 1 | 18 | 1 |
| The cloneContents() method of the Range interface copies the selected children of the range's Range/commonAncestorContainer and puts them in a new DocumentFragment object. | 1 | 12 | 1 | 1 | 18 | 1 |
| The Range.cloneRange() method returns a Range object with boundary points identical to the cloned Range. | 1 | 12 | 1 | 1 | 18 | 1 |
| The collapse() method of the Range interface collapses the Range to one of its boundary points. | 1 | 12 | 1 | 1 | 18 | 1 |
collapse (toStart parameter optional) `toStart` parameter is optional | 1 | 16 | 25 | 1 | 18 | 1 |
| The read-only collapsed property of the AbstractRange interface returns true if the range's start position and end position are the same. | 1 | 12 | 1 | 1 | 18 | 1 |
| The Range.commonAncestorContainer read-only property returns the deepest — or furthest down the document tree — Node that contains both boundary points of the Range. This means that if AbstractRange.startContainer and AbstractRange.endContainer both refer to the same node, this node is the common ancestor container. | 1 | 12 | 1 | 1 | 18 | 1 |
| The compareBoundaryPoints() method of the Range interface compares the boundary points of the Range with those of another range. | 1 | 12 | 1 | 1 | 18 | 1 |
| The comparePoint() method of the Range interface determines whether a specified point is before, within, or after the Range. The point is specified by a reference node and an offset within that node. | 1 | 17 | 1 | 3 | 18 | 1 |
| The Range.createContextualFragment() method of the Range interface returns a DocumentFragment representing the parsed input HTML or XML. | 1 | 12 | 1 | 1 | 18 | 1 |
| The Range.deleteContents() method removes all completely-selected within this range from the document. For the partially selected nodes at the start or end of the range, only the selected portion of the text is deleted, while the node itself remains intact. Afterwards, the range is collapsed to the end of the last selected node. | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only endContainer property of the AbstractRange interface returns the Node in which the end of the range is located. | 1 | 12 | 1 | 1 | 18 | 1 |
| The endOffset property of the AbstractRange interface returns the offset into the end node of the range's end position. | 1 | 12 | 1 | 1 | 18 | 1 |
| The extractContents() method of the Range interface is similar to a combination of Range.cloneContents() and Range.deleteContents(). It removes the child Nodes of the range from the document, clones them, and returns them as a new DocumentFragment object. For partially selected nodes, only the selected text is deleted, but all containing parent nodes up to… | 1 | 12 | 1 | 1 | 18 | 1 |
| The Range.getBoundingClientRect() method returns a DOMRect object that bounds the contents of the range; this is a rectangle enclosing the union of the bounding rectangles for all the elements in the range. | 4 | 12 | 4 | 5 | 18 | 4 |
| The Range.getClientRects() method returns a list of DOMRect objects representing the area of the screen occupied by the range. This is created by aggregating the results of calls to for all the elements in the range. | 4 | 12 | 4 | 5 | 18 | 4 |
| The Range.insertNode() method inserts a node at the start of the Range. | 1 | 12 | 1 | 1 | 18 | 1 |
| The Range.intersectsNode() method returns a boolean indicating whether the given Node intersects the Range. | 1 | 17 | 17 | 3 | 18 | 1 |
| The isPointInRange() method of the Range interface determines whether a specified point is within the Range. The point is specified by a reference node and an offset within that node. It is equivalent to calling Range.comparePoint() and checking if the result is 0. | 1 | 15 | 1 | 3 | 18 | 1 |
| The Range() constructor returns a newly created Range object whose start and end are offset 0 of the global Window/document object. | 29 | 15 | 24 | 8 | 29 | 8 |
| The Range.selectNode() method sets the Range to contain the Node and its contents. The parent Node of the start and end of the Range will be the same as the parent of the referenceNode. | 1 | 12 | 1 | 1 | 18 | 1 |
| The Range.selectNodeContents() method sets the Range to contain the contents of a Node. | 1 | 12 | 1 | 1 | 18 | 1 |
| The Range.setEnd() method sets the end position of a Range to be located at the given offset into the specified node. Setting the end point above (higher in the document) than the start point will result in a collapsed range with the start and end points both set to the specified end position. | 1 | 12 | 1 | 1 | 18 | 1 |
| The Range.setEndAfter() method sets the end position of a Range relative to another Node. The parent Node of end of the Range will be the same as that for the referenceNode. | 1 | 12 | 1 | 1 | 18 | 1 |
| The Range.setEndBefore() method sets the end position of a Range relative to another Node. The parent Node of end of the Range will be the same as that for the referenceNode. | 1 | 12 | 1 | 1 | 18 | 1 |
| The Range.setStart() method sets the start position of a . | 1 | 12 | 1 | 1 | 18 | 1 |
| The Range.setStartAfter() method sets the start position of a Range relative to a Node. The parent Node of the start of the Range will be the same as that for the referenceNode. | 1 | 12 | 1 | 1 | 18 | 1 |
| The Range.setStartBefore() method sets the start position of a Range relative to another Node. The parent Node of the start of the Range will be the same as that for the referenceNode. | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only startContainer property of the AbstractRange interface returns the Node in which the start of the range is located. | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only startOffset property of the AbstractRange interface returns the offset into the start node of the range's start position. | 1 | 12 | 1 | 1 | 18 | 1 |
| The surroundContents() method of the Range interface surrounds the selected content by a provided node. It extracts the contents of the range, replaces the children of newParent with the extracted contents, inserts newParent at the location of the extracted contents, and makes the range select newParent. | 1 | 12 | 1 | 1 | 18 | 1 |
| The Range.toString() method is a stringifier returning the text of the Range. | 1 | 12 | 1 | 1 | 18 | 1 |
| 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. | 1 | 12 | 1 | 1.3 | 18 | 1 |
| The Selection.addRange() method adds a Range to a Selection. | 1 | 12 | 1 | 3 | 18 | 1 |
| The Selection.anchorNode read-only property returns the Node in which the selection begins. It can return null if selection never existed in the document (e.g., an iframe that was never clicked on, or the node belongs to another document tree). | 1 | 12 | 1 | 1.3 | 18 | 1 |
| The Selection.anchorOffset read-only property returns the number of characters that the selection's anchor is offset within the Selection.anchorNode if said node is of type Text, CDATASection or Comment. | 1 | 12 | 1 | 1.3 | 18 | 1 |
| The Selection.collapse() method collapses the current selection to a single point. The document is not modified. If the content is focused and editable, the caret will blink there. | 1 | 12 | 1 | 1.3 | 18 | 1 |
| The Selection.collapseToEnd() method collapses the selection to the end of the last range in the selection. If the content of the selection is focused and editable, the caret will blink there. | 1 | 12 | 1 | 1.3 | 18 | 1 |
| The Selection.collapseToStart() method collapses the selection to the start of the first range in the selection. If the content of the selection is focused and editable, the caret will blink there. | 1 | 12 | 1 | 1.3 | 18 | 1 |
| The Selection.containsNode() method indicates whether a specified node is part of the selection. | 1 | 12 | 1 | 3.1 | 18 | 2 |
| The deleteFromDocument() method of the Selection interface invokes the Range.deleteContents() method on the selected Range. | 1 | 12 | 1 | 3.1 | 18 | 2 |
| The direction read-only property of the Selection interface is a string that provides the direction of the current selection. | 137 | 137 | 126 | 17 | 137 | 17 |
| The Selection.empty() method removes all ranges from the selection, leaving the Selection.anchorNode and Selection.focusNode properties equal to null and nothing selected. When this method is called, a Document/selectionchange_event event is fired at the document. | 1 | 12 | 55 | 1.3 | 18 | 1 |
| The Selection.extend() method moves the focus of the selection to a specified point. The anchor of the selection does not move. The selection will be from the anchor to the new focus, regardless of direction. | 1 | 12 | 1 | 3.1 | 18 | 2 |
| The Selection.focusNode read-only property returns the Node in which the selection ends. It can return null if selection never existed in the document (e.g., an iframe that was never clicked on, or the node belongs to another document tree). | 1 | 12 | 1 | 1.3 | 18 | 1 |
| The Selection.focusOffset read-only property returns the number of characters that the selection's focus is offset within the Selection.focusNode if said node is of type Text, CDATASection or Comment. | 1 | 12 | 1 | 1.3 | 18 | 1 |
| The getRangeAt() method of the Selection interface returns a range object representing a currently selected range. | 1 | 12 | 1 | 3 | 18 | 1 |
| The Selection.isCollapsed read-only property returns a boolean value which indicates whether or not there is currently any text selected. No text is selected when the selection's start and end points are at the same position in the content. | 1 | 12 | 1 | 1.3 | 18 | 1 |
| The Selection.modify() method applies a change to the current selection or cursor position, using simple textual commands. | 1 | 79 | 4 | 1.3 | 18 | 1 |
| The Selection.rangeCount read-only property returns the number of ranges in the selection. | 1 | 12 | 1 | 3 | 18 | 1 |
| The Selection.removeAllRanges() method removes all ranges from the selection, leaving the Selection.anchorNode and Selection.focusNode properties equal to null and nothing selected. When this method is called, a Document/selectionchange_event event is fired at the document. | 1 | 12 | 1 | 3 | 18 | 1 |
| The Selection.removeRange() method removes a range from a selection. | 58 | 12 | 1 | 17 | 58 | 17 |
| The Selection.selectAllChildren() method adds all the children of the specified node to the selection. Previous selection is lost. | 1 | 12 | 1 | 3.1 | 18 | 2 |
| The setBaseAndExtent() method of the Selection interface sets the selection to be a range including all or parts of two specified DOM nodes, and any content located between them. | 1 | 12 | 53 | 1.3 | 18 | 1 |
| The Selection.setPosition() method collapses the current selection to a single point. The document is not modified. If the content is focused and editable, the caret will blink there. | 1 | 14 | 55 | 1.3 | 18 | 1 |
| The Selection.toString() method returns a string currently being represented by the selection object, i.e., the currently selected text. | 1 | 12 | 1 | 1.3 | 18 | 1 |
| The type read-only property of the Selection interface returns a string describing the type of the current selection. | 1 | 12 | 57 | 1.3 | 18 | 1 |
| The DOM StaticRange interface extends AbstractRange to provide a method to specify a range of content in the DOM whose contents don't update to reflect changes which occur within the DOM tree. | 60 | 18 | 69 | 10.1 | 60 | 10.3 |
| The read-only collapsed property of the AbstractRange interface returns true if the range's start position and end position are the same. | 60 | 18 | 69 | 10.1 | 60 | 10.3 |
| The read-only endContainer property of the AbstractRange interface returns the Node in which the end of the range is located. | 60 | 18 | 69 | 10.1 | 60 | 10.3 |
| The endOffset property of the AbstractRange interface returns the offset into the end node of the range's end position. | 60 | 18 | 69 | 10.1 | 60 | 10.3 |
| The read-only startContainer property of the AbstractRange interface returns the Node in which the start of the range is located. | 60 | 18 | 69 | 10.1 | 60 | 10.3 |
| The read-only startOffset property of the AbstractRange interface returns the offset into the start node of the range's start position. | 60 | 18 | 69 | 10.1 | 60 | 10.3 |
| The StaticRange() constructor creates a new StaticRange object representing a span of content within the DOM. | 90 | 90 | 71 | 13.1 | 90 | 13.4 |
| The getSelection() method of the Window interface returns the Selection object associated with the window's document, representing the range of text selected by the user or the current position of the caret. | 1 | 12 | 1 | 1 | 18 | 1 |
- This feature was removed in a later browser version (79)
- This feature was removed in a later browser version (79)
- This feature was removed in a later browser version (79)
- This feature was removed in a later browser version (79)
- This feature was removed in a later browser version (79)
- This feature was removed in a later browser version (79)
- This browser only partially implements this feature
- This feature was removed in a later browser version (57)
- Only supported for `HTMLDocument`, not all `Document` objects.
- Before Chrome 127, a `selectionchange` event was fired on `Document`, see `Document`'s `selectionchange` event. See bug 40840956 for firing the event on `<input>` elements.
- Before Edge 127, a `selectionchange` event was fired on `Document`, see `Document`'s `selectionchange` event. See bug 40840956 for firing the event on `<input>` elements.
- Before Safari 18, a `selectionchange` event was fired on `Document`, see `Document`'s `selectionchange` event. See bug 271033 for firing the event on `<input>` elements.
- Before Chrome Android 127, a `selectionchange` event was fired on `Document`, see `Document`'s `selectionchange` event. See bug 40840956 for firing the event on `<input>` elements.
- Before Safari on iOS 18, a `selectionchange` event was fired on `Document`, see `Document`'s `selectionchange` event. See bug 271033 for firing the event on `<input>` elements.
- Before Chrome 127, a `selectionchange` event was fired on `Document`, see `Document`'s `selectionchange` event. See bug 40840956 for firing the event on `<textarea>` elements.
- Before Edge 127, a `selectionchange` event was fired on `Document`, see `Document`'s `selectionchange` event. See bug 40840956 for firing the event on `<textarea>` elements.
- Before Safari 18, a `selectionchange` event was fired on `Document`, see `Document`'s `selectionchange` event. See bug 271033 for firing the event on `<textarea>` elements.
- Before Chrome Android 127, a `selectionchange` event was fired on `Document`, see `Document`'s `selectionchange` event. See bug 40840956 for firing the event on `<textarea>` elements.
- Before Safari on iOS 18, a `selectionchange` event was fired on `Document`, see `Document`'s `selectionchange` event. See bug 271033 for firing the event on `<textarea>` elements.
- Starting with Firefox 13, the `Range` object throws a `DOMException` as defined in DOM 4, instead of a `RangeException` defined in prior specifications.
- Before Firefox 35, the method didn't throw if `node` was `null`.
- Before Firefox 139, `toString()` returns an empty string for selected texts in form elements. See bug 85686.
- In Firefox, `StaticRange` can currently only be used by browser-internal code or code with enhanced permissions; it is not yet exposed to the web.
Syntax
const selection = window.getSelection();
const text = selection.toString();
console.log('Selected text:', text);
// Clear the selection
selection.removeAllRanges();Live demo
Selectionrange. styling
::selection pseudoelement in selection time. show kastamize.
Use cases
Using Selection
The Selection API controls and modifies user text selections within the page.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.
Related links
Powered by web-features