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

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

selectNode method (Range)

Browser support:

9

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

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

The start and end points mean positions in the DOM hierarchy, not coordinates on the screen.

The boundary points can be retrieved with the startContainer, startOffset, endContainer and endOffset properties.
To align the boundary points to the contents of a node, use the selectNodeContents 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 selectNode 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.selectNode (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 selectNode (node) method is equivalent to setStartBefore (node); setEndAfter (node).

Example HTML code 1:

This example illustrates the use of the selectNode method:

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

            if (srcObj) {
                if (document.createRange) {     // all browsers, except IE before version 9
                    var rangeObj = document.createRange ();
                    if (onlyContent) {
                        rangeObj.selectNodeContents (srcObj);
                    }
                    else {
                        rangeObj.selectNode (srcObj);
                    }
                    rangeObj.deleteContents ();
                }
                else {      // Internet Explorer before version 9
                    alert ("Your browser does not support this example!");
                }
            }
        }
    </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="RemoveElement (true);">Remove the contents of the source element!</button>
    <button onclick="RemoveElement (false);">Remove the entire source element!</button>
</body>