In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > selection and ranges > properties > focusNode (selectionRange)

focusNode property (selectionRange)

Browser support:

9

Returns a reference to the element where the selection ends.

Note: The selectionRange object and its focusNode property are supported in Internet Explorer from version 9.

The focus point is the point where the process of selecting was ended. The focus node is the deepest node in the DOM hierarchy that contains the focus point.

In most cases, the focusNode property refers to a TextNode.
In that case, the focusOffset property returns the character position within the text content of the focus node where the selection ends.
However, in some cases (for example when the entire contents of the page are selected with Ctrl+A) the focusNode property refers to a node that can have child nodes.
In that case, the focusOffset property returns the index in the childNodes collection of the focus node where the selection ends. See the example for details.

Similarly, the anchor point is the point where the process of selecting was started. The anchor node is the deepest node in the DOM hierarchy that contains the anchor point. The anchorOffset property returns the position of the anchor point relative to the anchor node.

Note that the anchorNode and focusNode properties behave differently in Opera than in other browsers. In Opera, the element returned by the anchorNode property is never placed after the element returned by the focusNode property in the DOM hierarchy. In Firefox, Google Chrome, Safari and Internet Explorer, it depends on the direction of the selection.

The selectionRange object represents the current selection and every Range object that belongs to the selectionRange object represents a contiguous part of the selection. You can get the Range objects that belong to the selectionRange object with the getRangeAt method. The startContainer, startOffset, endContainer and endOffset properties of the Range object are similar to the anchorNode, anchorOffset, focusNode and focusOffset properties of the selectionRange object.

In Internet Explorer, Opera, Google Chrome, Safari and Firefox before version 3, at most one Range can belong to the selectionRange object, because text selection is always a contiguous part of the DOM hierarchy. In that case, using the anchorNode, anchorOffset, focusNode and focusOffset properties of the selectionRange object is simpler than using the properties of the Range object that belongs to the selectionRange object.
In Firefox from version 3, multiple areas of text can be selected by holding down the CTRL key while selecting. If multiple ranges are added to the selection (by the user or by script, see the addRange method), then use the properties of the Range objects of the selection for similar functionality.

If you need the entire selected text in one piece, use the toString method. To modify the selection, use the methods of the selectionRange object.

The properties mentioned above belong to the selectionRange object, which is not supported by Internet Explorer before version 9. If you want to get or manipulate the selection in that browsers (and optionally in newer ones as well), use the selection object with the createRange or createRangeCollection method.

Syntax:

object.focusNode;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Reference to the element where the selection ends. If there is no selection, returns null.

Default: this property has no default value.

Example HTML code 1:

The following example illustrates the use of the focusNode property:

<head>
    <script type="text/javascript">
        function SelectFocusNode () {
            if (window.getSelection) {  // all browsers, except IE before version 9
                var selection = window.getSelection ();
                if (selection.focusNode) {
                    var rangeToSelect = document.createRange ();
                    rangeToSelect.selectNode (selection.focusNode);

                    selection.removeAllRanges ();
                    selection.addRange (rangeToSelect);
                }
            } else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    <button onclick="SelectFocusNode ();">Select the entire element where the selection ends!</button>
    <br /><br />
    <div>
        <div>This is the first line.</div>
        <div>This is the second line.</div>
    </div>
</body>