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

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

endOffset property (Range)

Browser support:

9

Returns an integer that specifies the end position of the current Range relative to the endContainer element.

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

If the node referred to by the endContainer property is a TextNode, CDATASection or CommentNode, then the endOffset property returns a character position in the text content of the referred node. For other node types, the returned value is an index into the childNodes collection of the node.

Note that the end point is not part of the Range (it is the first position after), therefore the value returned by the endOffset property can be equal to the length of the text content or childNodes collection of the node referred to by the endContainer property.

Similarly, you can get the start point of a Range with the startContainer and startOffset properties.

If you want to modify the start or end point, use the setStart / setStartBefore / setStartAfter and the setEnd / setEndBefore / setEndAfter methods.
Or to align the boundary points of a Range to the start and end points of an element or its contents, use the selectNode or selectNodeContents method.

Syntax:

object.endOffset;

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

This property is read-only.

Possible values:

Integer that represents the end position.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the endOffset property:

<head>
    <script type="text/javascript">
        function TestBoundary () {
            var mySpan = document.getElementById ("mySpan");
            if (document.createRange) {     // all browsers, except IE before version 9
                var myRange = document.createRange ();

                myRange.selectNodeContents (mySpan);
                alert ("The range starts at the " + myRange.startOffset + ". child of the " + myRange.startContainer.tagName + " element.");
                alert ("The range ends at the " + myRange.endOffset + ". child of the " + myRange.endContainer.tagName + " element.");

                var textNode = mySpan.firstChild;
                myRange.selectNodeContents (textNode);
                alert ("The range starts at the " + myRange.startOffset + ". character position of the textNode element.");
                alert ("The range ends at the " + myRange.endOffset + ". character position of the textNode element.");
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    <button onclick="TestBoundary ()">Test the boundary positions of a range!</button>
    <br /><br />
    <span id="mySpan">The length of this text is 30.</span>
</body>