Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Compare Two HTML Elements
To compare two HTML elements we will use HTML and Javascript. HTML and JavaScript is a popular combination where there are instances whereby you need to compare two HTML elements. You may want to know if the two elements are absolutely similar in terms of structure, Class ID or §, etc.
In this article, we will explore two common approaches to compare HTML elements in JavaScript: Manual Comparison and JSON-based Comparison.
1. Comparing HTML Elements Manually
It simply means that, in manual comparison, you are fully in charge of the properties that you would want to compare. In this method, we compare them directly to check if a tag name, class name, or inner content matches with each other.
HTML Code
Here is the following HTML Code for Comparing Two Elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Elements Comparison</title>
</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>
<script>
// Function to compare two elements
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");
// Comparing firstElement and secondElement
if (areElementsSame(firstElement, secondElement)) {
console.log("First element and Second element are identical.");
} else {
console.log("First element and Second element are different.");
}
// Comparing firstElement and thirdElement
if (areElementsSame(firstElement, thirdElement)) {
console.log("First element and Third element are identical.");
} else {
console.log("First element and Third element are different.");
}
</script>
</body>
</html>
Explanation
- Function compareElements(el1, el2) ? This function inputs two HTML elements and compares these elements by tag name, class name, and content text. It returns true if for every property then it is true that x same as y; otherwise false.
- Console Output ? For identical elements, you will see that both, Element 1 and Element 2 are the same. For different elements, you will see that they are different in that while Element 1 describes the key message, Element 3 outlines the main tasks for achieving that message. The reason is that this approach allows for the determination of specific properties to be compared and when a manual comparison is necessary.
2. Comparison of two HTML elements using JSON.stringify()
Another fast way of comparing HTML elements is through JSON encoding of the attribute properties. This method also to an extent lowers the amount of comparison and all but removes the need for manual checking by serializing the element's attributes and any inner content into a JSON string.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compare HTML Elements with JSON</title>
</head>
<body>
<div id="block1" class="content">Hello World</div>
<div id="block2" class="content">Hello World</div>
<div id="block3" class="content">Tutorialspoint</div>
<script>
function compareElementsByJSON(el1, el2) {
const el1Props = {
tagName: el1.tagName,
className: el1.className,
innerText: el1.innerText
};
const el2Props = {
tagName: el2.tagName,
className: el2.className,
innerText: el2.innerText
};
return JSON.stringify(el1Props) === JSON.stringify(el2Props);
}
const block1 = document.getElementById("block1");
const block2 = document.getElementById("block2");
const block3 = document.getElementById("block3");
// Compare block1 and block2
if (compareElementsByJSON(block1, block2)) {
console.log("Block 1 and Block 2 are identical.");
} else {
console.log("Block 1 and Block 2 are different.");
}
// Compare block1 and block3
if (compareElementsByJSON(block1, block3)) {
console.log("Block 1 and Block 3 are identical.");
} else {
console.log("Block 1 and Block 3 are different.");
}
</script>
</body>
</html>
Explanation
- Function compareElementsByJSON(el1, el2) ?This function reads the tag name and class name of both the tags and also the whole content of the tags. It serializes the properties to JSON format by coming from JSON.stringify() and then makes a comparison between the JSON strings.
- Console Output ? The console logs messages indicating whether the elements are identical or different, such as: "The first, and second blocks of the design correspond to each other, meaning they are of the same nature."
Why Use JSON Comparison?
This kind of comparison in JSON format becomes resourceful when you need to compare many attributes of an element. This methodology impersonalizes the specific examination of distinct workshops and characteristics and compares the properties serially.
Conclusion
Comparing HTML elements in JavaScript may be done by hand or by taking advantage of superior methods such as mapping the properties to JSON. While the manual comparison gives you total control over which properties you wish to compare the JSON comparison helps you to compare numerous attributes in one go.
105 Views
