HTML - DOM Element isEqualNode() Method

Quiz

The isEqualNode() method checks if two nodes are equal by comparing their attributes, types, and child nodes. It returns 'true' if both nodes are equal; otherwise, it returns 'false'.

Syntax

element.isEqualNode(other_node)

Parameters

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

Return Value

This method returns a boolean value:It returns 'true' if both the nodes are equal ;otherwise it returns 'false'.

Examples of HTML DOM Element 'isEqualNode()' Method

Below are some of the examples of isEqualNode() method, which compares nodes in different scenarios to check for identical nodes within the HTML DOM element.

Comparing p Elements

This example helps us understand how the isEqualNode() method can be used to compare the two different nodes. Both node1 and node2 are <p> elements with the same text content, so isEqualNode() will return true as output.

<!DOCTYPE html>
<html lang="en">
<head>  
    <style> 
        .message {
            font-weight: bold;
            color: blue;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded',
        function() {
            var node1 = document.getElementsByClassName
            ('node')[0];
            var node2 = document.getElementsByClassName
            ('node')[1];
            // Compare the nodes
            var isEqual = node1.isEqualNode(node2);
            
            // Display nodes and result on the webpage
            var resultElement=document.getElementById('res');
            resultElement.innerHTML = `<p class="message">
            Are node1 and node2 equal? ${isEqual}</p>`;
        });
    </script>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>isEqualNode() Method</h2>
    <p>Comparing two nodes....</p>
    <p>Node 1:</p>
    <p class="node">Hello</p>
    <p>Node 2:</p>
    <p class="node">Hello</p>
    <div id="res"></div>
</body>

</html>

Comparing Div Elements Dynamically

This example shows how the 'isEqualNode()' method compares three <div> elements and displays the results accordingly. It first checks if div1 and div2 are equal, and then checks if div1 and div3 are equal. If div1 and div3 are equal, it returns true; otherwise, it returns false, and so on.

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Checks for identical Nodes</title>
    <script>
    function checkNodeEquality() {
        // Create div elements
        var div1 = createDiv('same', 'This is div1');
        var div2 = createDiv('same', 'This is div1');
        var div3 = createDiv('diff', 'This is div3');

        // Check if nodes are equal
        var areEqual1 = div1.isEqualNode(div2);
        var areEqual2 = div1.isEqualNode(div3);

        // Display results
        document.getElementById('res1').textContent = 
        'Are div1 and div2 equal? ' + areEqual1;
        document.getElementById('res2').textContent = 
        'Are div1 and div3 equal? ' + areEqual2;
    }

    function createDiv(className, textContent) {
        var div = document.createElement('div');
        div.setAttribute('class', className);
        div.textContent = textContent;
        return div;
    }
    </script>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>isEqualNode() Method</h2>
    <p>Checks for the equality of nodes:</p>

    <button onclick="checkNodeEquality()">
        Check Node Equality
    </button>

    <h3>Explanation:</h3>
    <div>
        <div class="same">div1: This is div1</div>
        <div class="same">div2: This is div1</div>
        <div class="diff">div3: This is div3</div>
    </div>

    <h3>Comparison Results:</h3>
    <div id="res1"></div>
    <div id="res2"></div>
</body>

</html>

Supported Browsers

Method
isEqualNode()	Yes	Yes	Yes	Yes	Yes

html_dom_element_reference.htm

Print Page