---
title: "tinymce.dom.Selection"
description: "This class handles text and control selection it's an crossbrowser utility class. Consult the TinyMCE API Documentation for more details and examples on how to use this class."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.selection/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.selection/index.md"
version: "latest"
last_updated: "2025-07-23T02:45:48Z"
tokens: 2518
---
# tinymce.dom.Selection
This class handles text and control selection it’s an crossbrowser utility class. Consult the TinyMCE API Documentation for more details and examples on how to use this class.
## Examples
```javascript
// Getting the currently selected node for the active editor
alert(tinymce.activeEditor.selection.getNode().nodeName);
```
## Summary
### Constructors
| Name | Summary | Defined by |
| --- | --- | --- |
| [Selection()](#Selection) | Constructs a new selection instance. | `Selection` |
### Methods
| Name | Summary | Defined by |
| --- | --- | --- |
| [collapse()](#collapse) | Collapse the selection to start or end of range. | `Selection` |
| [expand()](#expand) | Expands the selection range to contain the entire word when the selection is collapsed within the word. | `Selection` |
| [getBookmark()](#getBookmark) | Returns a bookmark location for the current selection. This bookmark object can then be used to restore the selection after some content modification to the document. | `Selection` |
| [getContent()](#getContent) | Returns the selected contents using the DOM serializer passed in to this class. | `Selection` |
| [getEnd()](#getEnd) | Returns the end element of a selection range. If the end is in a text node the parent element will be returned. | `Selection` |
| [getNode()](#getNode) | Returns the currently selected element or the common ancestor element for both start and end of the selection. | `Selection` |
| [getRng()](#getRng) | Returns the browsers internal range object. | `Selection` |
| [getSel()](#getSel) | Returns the browsers internal selection object. | `Selection` |
| [getStart()](#getStart) | Returns the start element of a selection range. If the start is in a text node the parent element will be returned. | `Selection` |
| [isCollapsed()](#isCollapsed) | Returns true/false if the selection range is collapsed or not. Collapsed means if it’s a caret or a larger selection. | `Selection` |
| [isEditable()](#isEditable) | Checks if the current selection’s start and end containers are editable within their parent’s contexts. | `Selection` |
| [moveToBookmark()](#moveToBookmark) | Restores the selection to the specified bookmark. | `Selection` |
| [select()](#select) | Selects the specified element. This will place the start and end of the selection range around the element. | `Selection` |
| [selectorChanged()](#selectorChanged) | Executes callback when the current selection starts/stops matching the specified selector. The current state will be passed to the callback as it’s first argument. | `Selection` |
| [setContent()](#setContent) | This method has been deprecated. Use "editor.insertContent" instead.
Sets the current selection to the specified content. If any contents is selected it will be replaced with the contents passed in to this function. If there is no selection the contents will be inserted where the caret is placed in the editor/page. | `Selection` |
| [setCursorLocation()](#setCursorLocation) | Move the selection cursor range to the specified node and offset. If there is no node specified it will move it to the first suitable location within the body. | `Selection` |
| [setNode()](#setNode) | Sets the current selection to the specified DOM element. | `Selection` |
| [setRng()](#setRng) | Changes the selection to the specified DOM range. | `Selection` |
## Constructors
### Selection
```javascript
public constructor function Selection(dom: tinymce.dom.DOMUtils, win: Window, serializer: tinymce.dom.Serializer, editor: tinymce.Editor)
```
Constructs a new selection instance.
#### Parameters
- `dom (DOMUtils)` - DOMUtils object reference.
- `win (Window)` - Window to bind the selection object to.
- `serializer (Serializer)` - DOM serialization class to use for getContent.
- `editor (Editor)` - Editor instance of the selection.
## Methods
### collapse()
```javascript
collapse(toStart: Boolean)
```
Collapse the selection to start or end of range.
#### Parameters
- `toStart (Boolean)` - Optional boolean state if to collapse to end or not. Defaults to false.
### expand()
```javascript
expand(options: Object)
```
Expands the selection range to contain the entire word when the selection is collapsed within the word.
#### Parameters
- `options (Object)` - Optional options provided to the expansion. Defaults to { type: 'word' }
### getBookmark()
```javascript
getBookmark(type: Number, normalized: Boolean): Object
```
Returns a bookmark location for the current selection. This bookmark object
can then be used to restore the selection after some content modification to the document.
#### Examples
```javascript
// Stores a bookmark of the current selection
const bm = tinymce.activeEditor.selection.getBookmark();
tinymce.activeEditor.setContent(tinymce.activeEditor.getContent() + 'Some new content');
// Restore the selection bookmark
tinymce.activeEditor.selection.moveToBookmark(bm);
```
#### Parameters
- `type (Number)` - Optional state if the bookmark should be simple or not. Default is complex.
- `normalized (Boolean)` - Optional state that enables you to get a position that it would be after normalization.
#### Return value
- `Object` - Bookmark object, use moveToBookmark with this object to restore the selection.
### getContent()
```javascript
getContent(args: Object): String
```
Returns the selected contents using the DOM serializer passed in to this class.
#### Examples
```javascript
// Alerts the currently selected contents
alert(tinymce.activeEditor.selection.getContent());
// Alerts the currently selected contents as plain text
alert(tinymce.activeEditor.selection.getContent({ format: 'text' }));
```
#### Parameters
- `args (Object)` - Optional settings class with for example output format text or html.
#### Return value
- `String` - Selected contents in for example HTML format.
### getEnd()
```javascript
getEnd(real: Boolean): Element
```
Returns the end element of a selection range. If the end is in a text
node the parent element will be returned.
#### Parameters
- `real (Boolean)` - Optional state to get the real parent when the selection is collapsed not the closest element.
#### Return value
- `Element` - End element of selection range.
### getNode()
```javascript
getNode(): Element
```
Returns the currently selected element or the common ancestor element for both start and end of the selection.
#### Examples
```javascript
// Alerts the currently selected elements node name
alert(tinymce.activeEditor.selection.getNode().nodeName);
```
#### Return value
- `Element` - Currently selected element or common ancestor element.
### getRng()
```javascript
getRng(): Range
```
Returns the browsers internal range object.
#### Return value
- `Range` - Internal browser range object.
### getSel()
```javascript
getSel(): Selection
```
Returns the browsers internal selection object.
#### Return value
- `Selection` - Internal browser selection object.
### getStart()
```javascript
getStart(real: Boolean): Element
```
Returns the start element of a selection range. If the start is in a text
node the parent element will be returned.
#### Parameters
- `real (Boolean)` - Optional state to get the real parent when the selection is collapsed not the closest element.
#### Return value
- `Element` - Start element of selection range.
### isCollapsed()
```javascript
isCollapsed(): Boolean
```
Returns true/false if the selection range is collapsed or not. Collapsed means if it’s a caret or a larger selection.
#### Return value
- `Boolean` - true/false state if the selection range is collapsed or not.
Collapsed means if it’s a caret or a larger selection.
### isEditable()
```javascript
isEditable(): Boolean
```
Checks if the current selection’s start and end containers are editable within their parent’s contexts.
#### Return value
- `Boolean` - Will be true if the selection is editable and false if it’s not editable.
### moveToBookmark()
```javascript
moveToBookmark(bookmark: Object)
```
Restores the selection to the specified bookmark.
#### Examples
```javascript
// Stores a bookmark of the current selection
const bm = tinymce.activeEditor.selection.getBookmark();
tinymce.activeEditor.setContent(tinymce.activeEditor.getContent() + 'Some new content');
// Restore the selection bookmark
tinymce.activeEditor.selection.moveToBookmark(bm);
```
#### Parameters
- `bookmark (Object)` - Bookmark to restore selection from.
### select()
```javascript
select(node: Element, content: Boolean): Element
```
Selects the specified element. This will place the start and end of the selection range around the element.
#### Examples
```javascript
// Select the first paragraph in the active editor
tinymce.activeEditor.selection.select(tinymce.activeEditor.dom.select('p')[0]);
```
#### Parameters
- `node (Element)` - HTML DOM element to select.
- `content (Boolean)` - Optional bool state if the contents should be selected or not on non IE browser.
#### Return value
- `Element` - Selected element the same element as the one that got passed in.
### selectorChanged()
```javascript
selectorChanged(selector: String, callback: Function)
```
Executes callback when the current selection starts/stops matching the specified selector. The current
state will be passed to the callback as it’s first argument.
#### Parameters
- `selector (String)` - CSS selector to check for.
- `callback (Function)` - Callback with state and args when the selector is matches or not.
### setContent()
```javascript
setContent(content: String, args: Object)
```
This method has been deprecated. Use "editor.insertContent" instead.
Sets the current selection to the specified content. If any contents is selected it will be replaced
with the contents passed in to this function. If there is no selection the contents will be inserted
where the caret is placed in the editor/page.
#### Examples
```javascript
// Inserts some HTML contents at the current selection
tinymce.activeEditor.selection.setContent('Some contents');
```
#### Parameters
- `content (String)` - HTML contents to set could also be other formats depending on settings.
- `args (Object)` - Optional settings object with for example data format.
### setCursorLocation()
```javascript
setCursorLocation(node: Node, offset: Number)
```
Move the selection cursor range to the specified node and offset.
If there is no node specified it will move it to the first suitable location within the body.
#### Parameters
- `node (Node)` - Optional node to put the cursor in.
- `offset (Number)` - Optional offset from the start of the node to put the cursor at.
### setNode()
```javascript
setNode(elm: Element): Element
```
Sets the current selection to the specified DOM element.
#### Examples
```javascript
// Inserts a DOM node at current selection/caret location
tinymce.activeEditor.selection.setNode(tinymce.activeEditor.dom.create('img', { src: 'some.gif', title: 'some title' }));
```
#### Parameters
- `elm (Element)` - Element to set as the contents of the selection.
#### Return value
- `Element` - Returns the element that got passed in.
### setRng()
```javascript
setRng(rng: Range, forward: Boolean)
```
Changes the selection to the specified DOM range.
#### Parameters
- `rng (Range)` - Range to select.
- `forward (Boolean)` - Optional boolean if the selection is forwards or backwards.