How to Compare Two HTML Elements?

Last Updated : 23 Jul, 2025

Comparing two HTML elements can be useful for determining if they are the same in terms of tag name, attributes, content, or structure. This is often needed when working with dynamic web applications or creating custom validation routines.

These are the following approaches to compare HTML elements:

Table of Content

Using JavaScript isEqualNode() Method
Comparing Tag Name, Attributes, and Content Manually

Using JavaScript isEqualNode() Method

The isEqualNode() method returns true if the two elements being compared have the same tag name, attributes, and content. Otherwise, it returns false.

If the elements are identical in every way (same tag name, same attributes with identical values, and same content), the output will be true.
If the elements differ in any aspect (different tag names, different attributes or attribute values, or different content), the output will be false.

Syntax:

element1.isEqualNode(element2);

Example: This example demonstrates comparing two elements using the isEqualNode() method.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>isEqualNode Example</title>
</head>

<body>
    <div class="box">Hello World</div>
    <div class="box">Hello World</div>
    <div class="box">GeeksforGeeks</div>
    <div id="elementC"></div> 

    <script>
        // Get the HTML elements by their class names
        const elementA =
            document.getElementsByClassName('box')[0]; 
        const elementB =
            document.getElementsByClassName('box')[1]; 
        const elementC =
            document.getElementsByClassName('box')[2]; 

        // Compare elements using isEqualNode
        const areAandBEqual = elementA.isEqualNode(elementB);
        const areAandCEqual = elementA.isEqualNode(elementC);

        // Log the result
        console.log(`Are element A and B equal? ${areAandBEqual}`);
        console.log(`Are element A and B equal? ${areAandCEqual}`); 
    </script>
</body>

</html>

Output:

comapring_elements — Comparing Two Elements

Comparing Tag Name, Attributes, and Content Manually

Manual comparison involves checking the tag name, attributes, and content individually. This approach allows for more granular control over what aspects of the elements you want to compare.

If the tag names of both elements are the same, proceed to the next step; otherwise, output false.
If both elements have the same number of attributes, proceed to compare each attribute's name and value; otherwise, output false.
If all attributes match in both name and value, proceed to compare the text content; otherwise, output false.
If the text content of both elements is identical, the final output will be true. If any step fails, the final output will be false.

Example: This example shows how to manually compare two elements.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        Manual Comparison of HTML Elements
    </title>
</head>

<body>
    <div id="element1" class="test">Hello World</div>
    <div id="element2" class="test">Hello World</div>
    <div id="element3" class="test">GeeksforGeeks</div>

    <script>
        function compareElements(el1, el2) {
            return el1.tagName === el2.tagName &&
                el1.className === el2.className &&
                el1.textContent === el2.textContent;
        }

        const el1 = document.getElementById("element1");
        const el2 = document.getElementById("element2");
        const el3 = document.getElementById("element3");

        // Compare element1 and element2
        if (compareElements(el1, el2)) {
            console.log("Element 1 and Element 2 are equal.");
        } else {
            console.log("Element 1 and Element 2 are not equal.");
        }

        // Compare element1 and element3
        if (compareElements(el1, el3)) {
            console.log("Element 1 and Element 3 are equal.");
        } else {
            console.log("Element 1 and Element 3 are not equal.");
        }
    </script>
</body>

</html>

Output:

comparing_elementss — Comparing Two Elements

HTML Introduction

pankaj2025

Improve

Article Tags :

HTML

How to Compare Two HTML Elements?

Using JavaScript isEqualNode() Method

Syntax:

Comparing Tag Name, Attributes, and Content Manually

Similar Reads

Basics

HTML Structure & Elements

HTML List

HTML Visuals & Media

HTML Layout & Design

HTML Projects& Advanced Topics

HTML Tutorial References

Thank You!

What kind of Experience do you want to share?