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

selectNodeContents method (Range)

Browser support:
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.
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.


object.selectNodeContents (node);
You can find the related objects in the Supported by objects section below.


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:
    <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.execCommand ('cut');
    <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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content