Skip to main content

Selection

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.

Methods

addRange()

addRange(range): void;

The Selection.addRange() method adds a Range to a Selection.

Parameters

Parameter	Type
`range`	`Range`

Returns

void

collapse()

collapse(node, offset?): void;

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.

Parameters

Parameter	Type
`node`	`Node` \| `null`
`offset?`	`number`

Returns

void

collapseToEnd()

collapseToEnd(): void;

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.

Returns

void

collapseToStart()

collapseToStart(): void;

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.

Returns

void

containsNode()

containsNode(node, allowPartialContainment?): boolean;

The Selection.containsNode() method indicates whether a specified node is part of the selection.

Parameters

Parameter	Type
`node`	`Node`
`allowPartialContainment?`	`boolean`

Returns

boolean

deleteFromDocument()

deleteFromDocument(): void;

The deleteFromDocument() method of the Selection interface invokes the Range.deleteContents() method on the selected Range.

Returns

void

empty()

empty(): void;

The Selection.empty() method removes all ranges from the selection, leaving the anchorNode and focusNode properties equal to null and nothing selected. When this method is called, a selectionchange event is fired at the document.

Returns

void

extend()

extend(node, offset?): void;

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.

Parameters

Parameter	Type
`node`	`Node`
`offset?`	`number`

Returns

void

getComposedRanges()

getComposedRanges(options?): StaticRange[];

The Selection.getComposedRanges() method returns an array of StaticRange objects representing the current selection ranges, and can return ranges that potentially cross shadow boundaries.

Parameters

Parameter	Type
`options?`	`GetComposedRangesOptions`

Returns

StaticRange[]

getRangeAt()

getRangeAt(index): Range;

The getRangeAt() method of the Selection interface returns a range object representing a currently selected range.

Parameters

Parameter	Type
`index`	`number`

Returns

modify()

modify(
   alter?, 
   direction?, 
   granularity?
): void;

The Selection.modify() method applies a change to the current selection or cursor position, using simple textual commands.

Parameters

Parameter	Type
`alter?`	`string`
`direction?`	`string`
`granularity?`	`string`

Returns

void

removeAllRanges()

removeAllRanges(): void;

The Selection.removeAllRanges() method removes all ranges from the selection, leaving the anchorNode and focusNode properties equal to null and nothing selected. When this method is called, a selectionchange event is fired at the document.

Returns

void

removeRange()

removeRange(range): void;

The Selection.removeRange() method removes a range from a selection.

Parameters

Parameter	Type
`range`	`Range`

Returns

void

selectAllChildren()

selectAllChildren(node): void;

The Selection.selectAllChildren() method adds all the children of the specified node to the selection. Previous selection is lost.

Parameters

Parameter	Type
`node`	`Node`

Returns

void

setBaseAndExtent()

setBaseAndExtent(
   anchorNode, 
   anchorOffset, 
   focusNode, 
   focusOffset
): void;

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.

Parameters

Parameter	Type
`anchorNode`	`Node`
`anchorOffset`	`number`
`focusNode`	`Node`
`focusOffset`	`number`

Returns

void

setPosition()

setPosition(node, offset?): void;

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.

Parameters

Parameter	Type
`node`	`Node` \| `null`
`offset?`	`number`

Returns

void

toString()

toString(): string;

Returns

string

Properties

anchorNode

readonly anchorNode: Node | null;

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).

anchorOffset

readonly anchorOffset: number;

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.

direction

readonly direction: string;

The direction read-only property of the Selection interface is a string that provides the direction of the current selection.

focusNode

readonly focusNode: Node | null;

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).

focusOffset

readonly focusOffset: number;

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.

isCollapsed

readonly isCollapsed: boolean;

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.

rangeCount

readonly rangeCount: number;

The Selection.rangeCount read-only property returns the number of ranges in the selection.

type

readonly type: string;

The type read-only property of the Selection interface returns a string describing the type of the current selection.