---
title: "Selection | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Interface 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.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection)

interface Selection {  
    [anchorNode](#anchornode): [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/) | null;  
    [anchorOffset](#anchoroffset): number;  
    [direction](#direction): string;  
    [focusNode](#focusnode): [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/) | null;  
    [focusOffset](#focusoffset): number;  
    [isCollapsed](#iscollapsed): boolean;  
    [rangeCount](#rangecount): number;  
    [type](#type): string;  
    [addRange](#addrange-1)(range: [Range](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Range/)): void;  
    [collapse](#collapse-1)(node: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/) | null, offset?: number): void;  
    [collapseToEnd](#collapsetoend-1)(): void;  
    [collapseToStart](#collapsetostart-1)(): void;  
    [containsNode](#containsnode-1)(node: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/), allowPartialContainment?: boolean): boolean;  
    [deleteFromDocument](#deletefromdocument-1)(): void;  
    [empty](#empty-1)(): void;  
    [extend](#extend-1)(node: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/), offset?: number): void;  
    [getComposedRanges](#getcomposedranges-1)(options?: [GetComposedRangesOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.GetComposedRangesOptions/)): [StaticRange](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StaticRange/)\[\];  
    [getRangeAt](#getrangeat-1)(index: number): [Range](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Range/);  
    [modify](#modify-1)(alter?: string, direction?: string, granularity?: string): void;  
    [removeAllRanges](#removeallranges-1)(): void;  
    [removeRange](#removerange-1)(range: [Range](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Range/)): void;  
    [selectAllChildren](#selectallchildren-1)(node: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/)): void;  
    [setBaseAndExtent](#setbaseandextent-1)(  
        anchorNode: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/),  
        anchorOffset: number,  
        focusNode: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/),  
        focusOffset: number,  
    ): void;  
    [setPosition](#setposition-1)(node: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/) | null, offset?: number): void;  
    [toString](#tostring-1)(): string;  
}

##### Index

### Properties[](#properties)

[anchorNode](#anchornode) [anchorOffset](#anchoroffset) [direction](#direction) [focusNode](#focusnode) [focusOffset](#focusoffset) [isCollapsed](#iscollapsed) [rangeCount](#rangecount) [type](#type)

### Methods[](#methods)

[addRange](#addrange) [collapse](#collapse) [collapseToEnd](#collapsetoend) [collapseToStart](#collapsetostart) [containsNode](#containsnode) [deleteFromDocument](#deletefromdocument) [empty](#empty) [extend](#extend) [getComposedRanges](#getcomposedranges) [getRangeAt](#getrangeat) [modify](#modify) [removeAllRanges](#removeallranges) [removeRange](#removerange) [selectAllChildren](#selectallchildren) [setBaseAndExtent](#setbaseandextent) [setPosition](#setposition) [toString](#tostring)

## Properties[](#properties-1)

### `Readonly`anchorNode[](#anchornode)

anchorNode: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.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).

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/anchorNode)

### `Readonly`anchorOffset[](#anchoroffset)

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.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/anchorOffset)

### `Readonly`direction[](#direction)

direction: string

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

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/direction)

### `Readonly`focusNode[](#focusnode)

focusNode: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.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).

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/focusNode)

### `Readonly`focusOffset[](#focusoffset)

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.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/focusOffset)

### `Readonly`isCollapsed[](#iscollapsed)

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.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/isCollapsed)

### `Readonly`rangeCount[](#rangecount)

rangeCount: number

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

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/rangeCount)

### `Readonly`type[](#type)

type: string

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

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/type)

## Methods[](#methods-1)

### addRange[](#addrange)

-   addRange(range: [Range](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Range/)): void[](#addrange-1)
    
    The **`Selection.addRange()`** method adds a Range to a Selection.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/addRange)
    
    #### Parameters
    
    -   range: [Range](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Range/)
    
    #### Returns void
    

### collapse[](#collapse)

-   collapse(node: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/) | null, offset?: number): void[](#collapse-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.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/collapse)
    
    #### Parameters
    
    -   node: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/) | null
    -   `Optional`offset: number
    
    #### Returns void
    

### collapseToEnd[](#collapsetoend)

-   collapseToEnd(): void[](#collapsetoend-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.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/collapseToEnd)
    
    #### Returns void
    

### collapseToStart[](#collapsetostart)

-   collapseToStart(): void[](#collapsetostart-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.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/collapseToStart)
    
    #### Returns void
    

### containsNode[](#containsnode)

-   containsNode(node: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/), allowPartialContainment?: boolean): boolean[](#containsnode-1)
    
    The **`Selection.containsNode()`** method indicates whether a specified node is part of the selection.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/containsNode)
    
    #### Parameters
    
    -   node: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/)
    -   `Optional`allowPartialContainment: boolean
    
    #### Returns boolean
    

### deleteFromDocument[](#deletefromdocument)

-   deleteFromDocument(): void[](#deletefromdocument-1)
    
    The **`deleteFromDocument()`** method of the Selection interface invokes the Range.deleteContents() method on the selected Range.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/deleteFromDocument)
    
    #### Returns void
    

### empty[](#empty)

-   empty(): void[](#empty-1)
    
    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.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/empty)
    
    #### Returns void
    

### extend[](#extend)

-   extend(node: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/), offset?: number): void[](#extend-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.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/extend)
    
    #### Parameters
    
    -   node: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/)
    -   `Optional`offset: number
    
    #### Returns void
    

### getComposedRanges[](#getcomposedranges)

-   getComposedRanges(options?: [GetComposedRangesOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.GetComposedRangesOptions/)): [StaticRange](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StaticRange/)\[\][](#getcomposedranges-1)
    
    The **`Selection.getComposedRanges()`** method returns an array of StaticRange objects representing the current selection ranges, and can return ranges that potentially cross shadow boundaries.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/getComposedRanges)
    
    #### Parameters
    
    -   `Optional`options: [GetComposedRangesOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.GetComposedRangesOptions/)
    
    #### Returns [StaticRange](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.StaticRange/)\[\]
    

### getRangeAt[](#getrangeat)

-   getRangeAt(index: number): [Range](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Range/)[](#getrangeat-1)
    
    The **`getRangeAt()`** method of the Selection interface returns a range object representing a currently selected range.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/getRangeAt)
    
    #### Parameters
    
    -   index: number
    
    #### Returns [Range](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Range/)
    

### modify[](#modify)

-   modify(alter?: string, direction?: string, granularity?: string): void[](#modify-1)
    
    The **`Selection.modify()`** method applies a change to the current selection or cursor position, using simple textual commands.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/modify)
    
    #### Parameters
    
    -   `Optional`alter: string
    -   `Optional`direction: string
    -   `Optional`granularity: string
    
    #### Returns void
    

### removeAllRanges[](#removeallranges)

-   removeAllRanges(): void[](#removeallranges-1)
    
    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.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/removeAllRanges)
    
    #### Returns void
    

### removeRange[](#removerange)

-   removeRange(range: [Range](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Range/)): void[](#removerange-1)
    
    The **`Selection.removeRange()`** method removes a range from a selection.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/removeRange)
    
    #### Parameters
    
    -   range: [Range](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Range/)
    
    #### Returns void
    

### selectAllChildren[](#selectallchildren)

-   selectAllChildren(node: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/)): void[](#selectallchildren-1)
    
    The **`Selection.selectAllChildren()`** method adds all the children of the specified node to the selection. Previous selection is lost.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/selectAllChildren)
    
    #### Parameters
    
    -   node: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/)
    
    #### Returns void
    

### setBaseAndExtent[](#setbaseandextent)

-   setBaseAndExtent(  
        anchorNode: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/),  
        anchorOffset: number,  
        focusNode: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/),  
        focusOffset: number,  
    ): void[](#setbaseandextent-1)
    
    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.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/setBaseAndExtent)
    
    #### Parameters
    
    -   anchorNode: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/)
    -   anchorOffset: number
    -   focusNode: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/)
    -   focusOffset: number
    
    #### Returns void
    

### setPosition[](#setposition)

-   setPosition(node: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/) | null, offset?: number): void[](#setposition-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.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Selection/setPosition)
    
    #### Parameters
    
    -   node: [Node](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Node/) | null
    -   `Optional`offset: number
    
    #### Returns void
    

### toString[](#tostring)

-   toString(): string[](#tostring-1)
    
    #### Returns string