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

selectNode method (Range)

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


object.selectNode (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 selectNode (node) method is equivalent to setStartBefore (node); setEndAfter (node).

Example HTML code 1:

This example illustrates the use of the selectNode method:
    <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!");
    <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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content