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

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

setStart method (Range)

Browser support:

9

Sets the start position of the current Range.

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

The start position of a Range is the first position in the DOM hierarchy that is contained by the Range. If the start position of a Range needs to be aligned to the start or end position of a node, the setStartBefore and setStartAfter methods can be used.

Similarly, the setEnd, setEndBefore and setEndAfter methods set the end position of a Range.
If you want 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.
The boundary points of a Range object can be retrieved with the startContainer, startOffset, endContainer and endOffset properties.

Syntax:

object.setStart (node, offsetInsideNode);

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

Parameters:

node

Required. Reference to the deepest node in the DOM hierarchy that contains the new start point.

offsetInsideNode

Required. Integer that specifies the position of the new start point relative to the node element.

If the node element can have child nodes, then the offsetInsideNode parameter specifies the position of a child node in the childNodes collection of the node element, else it specifies a character position in the text content of the node element.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the setStart method:

<head>
    <script type="text/javascript">
        function DeleteChar () {
            var div = document.getElementById ("myDiv");

            if (document.createRange) {     // all browsers, except IE before version 9
                var textNode = div.firstChild;      // the text node inside the div
                if (textNode.data.length > 1) {
                    var rangeObj = document.createRange ();
                        // aligns the range to the second character
                    rangeObj.setStart (textNode, 1);
                    rangeObj.setEnd (textNode, 2);
                        // deletes the character
                    rangeObj.deleteContents ();
                }
            }
            else {      // Internet Explorer before version 9
                var rangeObj = document.body.createTextRange ();
                rangeObj.moveToElementText (div);
                    // aligns the range to the second character
                rangeObj.moveStart ("character", 1);
                rangeObj.collapse (true);
                rangeObj.moveEnd ("character", 1);

                    // deletes the character
                rangeObj.select ();
                rangeObj.execCommand ('cut');
            }
        }
    </script>
</head>
<body>
    <div id="myDiv" style="color:red">The color of this text is red.</div>
    <br /><br />
    <button onclick="DeleteChar ()">Delete the second character from the red text!</button>
</body>