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

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

selectNodeContents method (Range)

Browser support:

9

Aligns the start and end points of the current Range object to the contents of the specified element.

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

The boundary points can be retrieved with the startContainer, startOffset, endContainer and endOffset properties.
To align the boundary points to a node instead of its contents, use the selectNode method.
If you want to modify the start or end point only, use the (setStart, setStartBefore, setStartAfter) and the ((setEnd, setEndBefore, setEndAfter)) methods.

Note: the selectNodeContents method does not highlight the contents of a node; it only moves the boundary points of a Range. If you want to select the contents of a range, use the addRange method of the selectionRange object.

In Internet Explorer before version 9 (and in newer versions as well), the TextRange object provides similar functionality to the Range object. To align the boundary points of a TextRange object to the contents of an element, use the moveToElementText method.

Syntax:

object.selectNodeContents (node);

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

Parameters:

node

Required. Reference to a node to align to.

Return value:

This method has no return value.

The selectNodeContents (node) method is equivalent to setStart (node, 0); setEnd (node, len); where the value of the len parameter is the length of the node's text content (when the node is a TextNode, CDATASection or CommentNode) or the length of the childNodes collection that belongs to the node (in other cases).

Example HTML code 1:

This example illustrates the use of the selectNodeContents method:

<head>
    <script type="text/javascript">
        function RemoveContent () {
            var srcObj = document.getElementById ("src");

            if (document.createRange) {     // all browsers, except IE before version 9
                var rangeObj = document.createRange ();
                rangeObj.selectNodeContents (srcObj);
                rangeObj.deleteContents ();
            }
            else {      // Internet Explorer before version 9
                var rangeObj = document.body.createTextRange ();
                rangeObj.moveToElementText (srcObj);
                rangeObj.select ();
                rangeObj.execCommand ('cut');
            }
        }
    </script>
</head>
<body>
    <div id="src" style="background-color:#e0a0b0; width:300px; height:50px;">The <b>contents</b> of the <i>source</i> element.</div>
    <br /><br />
    <button onclick="RemoveContent ();">Remove the contents of the source element!</button>
</body>