Article Categories

Selected Reading

How to Compare Two HTML Elements?

CSS Web Development HTML

Comparing HTML elements in JavaScript is a common requirement when building dynamic web applications. You might need to check if two elements have the same tag name, classes, content, or other properties. This article explores two effective methods for comparing HTML elements using JavaScript.

Method 1: Manual Element Comparison

Manual comparison gives you complete control over which properties to compare. This method directly checks specific attributes like tag name, class name, and content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manual HTML Elements Comparison</title>
    <style>
        .sample {
            padding: 10px;
            margin: 5px 0;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            background-color: #e8f5e8;
            border-left: 4px solid #4CAF50;
        }
    </style>
</head>
<body>
    <div id="firstElement" class="sample">Hello World</div>
    <div id="secondElement" class="sample">Hello World</div>
    <div id="thirdElement" class="sample">TutorialsPoint</div>
    <div id="output" class="result"></div>

    <script>
        function areElementsSame(elementA, elementB) {
            return elementA.tagName === elementB.tagName &&
                   elementA.className === elementB.className &&
                   elementA.innerText === elementB.innerText;
        }

        const firstElement = document.getElementById("firstElement");
        const secondElement = document.getElementById("secondElement");
        const thirdElement = document.getElementById("thirdElement");
        const output = document.getElementById("output");

        let results = [];

        // Compare first and second elements
        if (areElementsSame(firstElement, secondElement)) {
            results.push("? First and Second elements are identical");
        } else {
            results.push("? First and Second elements are different");
        }

        // Compare first and third elements
        if (areElementsSame(firstElement, thirdElement)) {
            results.push("? First and Third elements are identical");
        } else {
            results.push("? First and Third elements are different");
        }

        output.innerHTML = results.join("<br>");
    </script>
</body>
</html>

Three div elements are displayed with gray backgrounds. Below them, comparison results show:
? First and Second elements are identical
? First and Third elements are different

Method 2: JSON-Based Element Comparison

JSON comparison serializes element properties into strings for easy comparison. This approach is efficient when comparing multiple attributes simultaneously

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON-Based HTML Elements Comparison</title>
    <style>
        .content {
            padding: 15px;
            margin: 5px 0;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div id="block1" class="content" data-value="test">Hello World</div>
    <div id="block2" class="content" data-value="test">Hello World</div>
    <div id="block3" class="content" data-value="different">TutorialsPoint</div>
    <div id="output" class="result"></div>

    <script>
        function compareElementsByJSON(el1, el2) {
            const el1Props = {
                tagName: el1.tagName,
                className: el1.className,
                innerText: el1.innerText,
                dataset: el1.dataset
            };
            const el2Props = {
                tagName: el2.tagName,
                className: el2.className,
                innerText: el2.innerText,
                dataset: el2.dataset
            };
            return JSON.stringify(el1Props) === JSON.stringify(el2Props);
        }

        const block1 = document.getElementById("block1");
        const block2 = document.getElementById("block2");
        const block3 = document.getElementById("block3");
        const output = document.getElementById("output");

        let comparisons = [];

        // Compare block1 and block2
        if (compareElementsByJSON(block1, block2)) {
            comparisons.push("? Block 1 and Block 2 are identical");
        } else {
            comparisons.push("? Block 1 and Block 2 are different");
        }

        // Compare block1 and block3
        if (compareElementsByJSON(block1, block3)) {
            comparisons.push("? Block 1 and Block 3 are identical");
        } else {
            comparisons.push("? Block 1 and Block 3 are different");
        }

        output.innerHTML = "<h4>JSON Comparison Results:</h4>" + comparisons.join("<br>");
    </script>
</body>
</html>

Three div elements with light gray backgrounds are displayed. Below them, the comparison results show:
JSON Comparison Results:
? Block 1 and Block 2 are identical
? Block 1 and Block 3 are different

Comparison of Methods

Aspect	Manual Comparison	JSON Comparison
Control	Full control over properties	Compares all defined properties
Performance	Faster for few properties	Efficient for many properties
Flexibility	Highly customizable	Less customizable
Code Complexity	Simple for basic comparisons	Cleaner for complex comparisons

Conclusion

Both methods offer effective ways to compare HTML elements in JavaScript. Use manual comparison when you need precise control over specific properties, and JSON comparison when dealing with multiple attributes efficiently.

Souvik Chakraborty

Updated on: 2026-03-15T18:29:18+05:30

424 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next