HTML - DOM isSameNode() Method

Quiz

The isSameNode() method checks whether two node references point to the same node object within an HTML document. It returns true if both references point to the exact same node; otherwise, it returns false.

Syntax

node.isEqualNode(otherNode);

Parameters

Parameter	Description
otherNode	Specifies the node to compare against the current node.

Return Value

This method returns a boolean value:It returns 'true' if the current node is the same as the provided node;otherwise it returns 'false'.

Examples of HTML DOM Element 'isSameNode()' Method

Below are some examples of isSameNode() method, which compares nodes in various scenarios to check if they point to the same node within the HTML DOM.

Checking for the same Node

This example checks for similar nodes using the isSameNode() method. In this case, node1 and node2 are not the same node object because they refer to the different <p> elements within the HTML document. The isSameNode() method returns false.

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>isSameNode() Method Example</title>
</head>
<body>
    <h1>HTML - DOM Element</h1>
    <h2>isSameNode() Method</h2>
    <p>Checking for same nodes....</p>
    <div id="container">
        <p id="node1">Paragraph 1</p>
        <p id="node2">Paragraph 2</p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', 
        function() {
            var node1 = document.getElementById('node1');
            var node2 = document.getElementById('node2');

            // Compare if node1 is the same as node2
            var isSame = node1.isSameNode(node2);

            // Display the result
            var resultElement = document.createElement('p');
            resultElement.textContent = 
            'Are node1 and node2 the same node? ' + isSame;
            document.body.appendChild(resultElement);
        });
    </script>
</body>

</html>

Node Content Comparison

This examples shows how we can compare the contents of two nodes, here we use 'textContent' property to check the actual text inside each node. By comparing these text we can see if they are same or different.

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Node Content Comparison</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>isSameNode() Method</h2>
    <p>Compare node content by clicking the button!</p>
    <div id="container">
        <p id="node1">Paragraph 1</p>
        <p id="node2">Paragraph 1</p>  
        <p id="node3">Paragraph 2</p>
    </div>

    <button onclick="compareContent()">
        Compare Content
    </button>

    <script>
    function compareContent() {
        var node1 = document.getElementById('node1');
        var node2 = document.getElementById('node2');
        var node3 = document.getElementById('node3');

        // Compare content of node1 with node2 and node3 
        var isSameContent1 = 
        node1.textContent === node2.textContent; 
        var isSameContent2 = 
        node1.textContent === node3.textContent;

        alert('Is the content of node1 the same as node2? ' 
        + isSameContent1 + '\n' +
            'Is the content of node1 the same as node3? ' 
            + isSameContent2);
    }
    </script>
</body>

</html>

Supported Browsers

Method
isSameNode()	Yes	Yes	No	Yes	Yes

html_dom.htm

Print Page