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

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

startContainer property (Range)

Browser support:

9

Returns a reference to the deepest node in the DOM hierarchy that contains the start point of the current Range object.

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

Use it together with the startOffset property to get the exact start point of the current Range object.

Similarly, you can get the end point of a Range with the endContainer and endOffset properties.

If you want to modify the start or end point, use the setStart / setStartBefore / setStartAfter and the setEnd / setEndBefore / setEndAfter methods.
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.

Syntax:

object.startContainer;

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

This property is read-only.

Possible values:

Reference to the deepest node that contains the start point of the Range object.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the startContainer 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>