Join us online - 19th of November
Save your spot

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

interface Selection {
    anchorNode: Node | null;
    anchorOffset: number;
    direction: string;
    focusNode: Node | null;
    focusOffset: number;
    isCollapsed: boolean;
    rangeCount: number;
    type: string;
    addRange(range: Range): void;
    collapse(node: Node | null, offset?: number): void;
    collapseToEnd(): void;
    collapseToStart(): void;
    containsNode(node: Node, allowPartialContainment?: boolean): boolean;
    deleteFromDocument(): void;
    empty(): void;
    extend(node: Node, offset?: number): void;
    getComposedRanges(options?: GetComposedRangesOptions): StaticRange[];
    getRangeAt(index: number): Range;
    modify(alter?: string, direction?: string, granularity?: string): void;
    removeAllRanges(): void;
    removeRange(range: Range): void;
    selectAllChildren(node: Node): void;
    setBaseAndExtent(
        anchorNode: Node,
        anchorOffset: number,
        focusNode: Node,
        focusOffset: number,
    ): void;
    setPosition(node: Node | null, offset?: number): void;
    toString(): string;
}
Index
anchorNode anchorOffset direction focusNode focusOffset isCollapsed rangeCount type
addRange collapse collapseToEnd collapseToStart containsNode deleteFromDocument empty extend getComposedRanges getRangeAt modify removeAllRanges removeRange selectAllChildren setBaseAndExtent setPosition toString
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).

MDN Reference

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

direction: string

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

MDN Reference

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

MDN Reference

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

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

rangeCount: number

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

MDN Reference

type: string

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

MDN Reference

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

    MDN Reference

    Parameters

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

    MDN Reference

    Parameters

    • node: Node | null
    • Optionaloffset: number

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

    MDN Reference

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

    MDN Reference

    Returns void

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

    MDN Reference

    Parameters

    • node: Node
    • OptionalallowPartialContainment: boolean

    Returns boolean

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

    MDN Reference

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

    MDN Reference

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

    MDN Reference

    Parameters

    • node: Node
    • Optionaloffset: number

    Returns void

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

    MDN Reference

    Parameters

    • index: number

    Returns Range

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

    MDN Reference

    Parameters

    • Optionalalter: string
    • Optionaldirection: string
    • Optionalgranularity: string

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

    MDN Reference

    Returns void

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

    MDN Reference

    Parameters

    Returns void

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

    MDN Reference

    Parameters

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

    MDN Reference

    Parameters

    • anchorNode: Node
    • anchorOffset: number
    • focusNode: Node
    • focusOffset: number

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

    MDN Reference

    Parameters

    • node: Node | null
    • Optionaloffset: number

    Returns void

  • Returns string

Was this helpful?