গতিশীল ওয়েব অ্যাপ্লিকেশন তৈরি করার সময় জাভাস্ক্রিপ্টে এইচটিএমএল উপাদানগুলির তুলনা করা একটি সাধারণ প্রয়োজন। দুটি উপাদানের একই ট্যাগ নাম, ক্লাস, বিষয়বস্তু বা অন্যান্য বৈশিষ্ট্য আছে কিনা তা আপনাকে পরীক্ষা করতে হতে পারে। এই নিবন্ধটি জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএল উপাদানগুলির তুলনা করার জন্য দুটি কার্যকর পদ্ধতি অন্বেষণ করে৷
৷পদ্ধতি 1:ম্যানুয়াল উপাদান তুলনা
ম্যানুয়াল তুলনা আপনাকে কোন বৈশিষ্ট্যগুলির তুলনা করতে হবে তার উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়। এই পদ্ধতিটি সরাসরি নির্দিষ্ট বৈশিষ্ট্য যেমন ট্যাগ নাম, শ্রেণীর নাম এবং বিষয়বস্তু
পরীক্ষা করে
<!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
পদ্ধতি 2:JSON-ভিত্তিক উপাদান তুলনা
JSON তুলনা সহজ তুলনার জন্য উপাদান বৈশিষ্ট্যগুলিকে স্ট্রিংগুলিতে সিরিয়ালাইজ করে। একই সাথে একাধিক বৈশিষ্ট্যের তুলনা করার সময় এই পদ্ধতিটি কার্যকরী হয়
<!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
পদ্ধতির তুলনা
উপসংহার
উভয় পদ্ধতিই জাভাস্ক্রিপ্টে এইচটিএমএল উপাদান তুলনা করার কার্যকর উপায় অফার করে। যখন আপনার নির্দিষ্ট বৈশিষ্ট্যগুলির উপর সুনির্দিষ্ট নিয়ন্ত্রণের প্রয়োজন হয় তখন ম্যানুয়াল তুলনা ব্যবহার করুন এবং একাধিক বৈশিষ্ট্যের সাথে দক্ষতার সাথে কাজ করার সময় JSON তুলনা ব্যবহার করুন৷
