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

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

compareNode method (Range)

Browser support:


	3

Returns an integer that represents whether the specified node is before, inside, after, or surrounding the current Range object.

Note: the support for the compareNode method has been removed in Firefox 3. Use the compareBoundaryPoints method instead.

Syntax:

object.compareNode (nodeToCompare);

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

Parameters:

nodeToCompare

Required. Reference to the node to compare.

Return value:

Integer that retrieves the placement of the node relative to the current Range object in the DOM hierarchy.

Predefined constants are available for the possible returned values, in the scope of the Range object. For further details, see the page for the Range object.

The value can be one of the following values (the value of a predefined constant appears in parentheses after the constant):

NODE_BEFORE (0)	The node is before the current Range object.
NODE_AFTER (1)	The node is after the current Range object.
NODE_BEFORE_AND_AFTER (2)	The node is surrounding the current Range object.
NODE_INSIDE (3)	The node is inside the current Range object.

Example HTML code 1:

This example illustrates the use of the compareNode method:

<head>
    <script type="text/javascript">
        function TestPlacement () {
            var boldText = document.getElementById ("boldText");

            if (window.getSelection) {  // all browsers, except IE before version 9
                var selection = window.getSelection ();
                if (selection.rangeCount > 0) {
                    var selRange = selection.getRangeAt (0);
                    if (selRange.compareNode) {         // Firefox earlier than version 3, Google Chrome, Safari, Opera
                        var placement = selRange.compareNode (boldText);
                        switch (placement) {
                        case Range.NODE_BEFORE:
                            alert ("The selection is after the bold text.");
                            break;
                        case Range.NODE_AFTER:
                            alert ("The selection is before the bold text.");
                            break;
                        case Range.NODE_BEFORE_AND_AFTER:
                            alert ("The selection is inside the bold text.");
                            break;
                        case Range.NODE_INSIDE:
                            alert ("The selection contains the bold text.");
                            break;
                        };
                    }
                    else {
                        alert ("Your browser does not support this example!");
                    }
                }
                else {
                    alert ("Please select some content!");
                }
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    Select some text on this page and use the following button to get information about 
    the placement of the <b id="boldText">bold text</b> relative to the selection.
    <br /><br />
    <button onclick="TestPlacement ();">Test placement</button>
</body>