JavaScript-এ HTML এলিমেন্ট তুলনা: ধাপে ধাপ গাইড

JavaScript-এ HTML এলিমেন্ট তুলনা করা ডাইনামিক ওয়েব অ্যাপ্লিকেশন বিল্ড করার সময় একটি সাধারণ প্রয়োজনীয়তা। আপনাকে চেক করতে হতে পারে দুটি এলিমেন্টে একই ট্যাগ নাম, ক্লাস, কন্টেন্ট, বা অন্যান্য প্রপার্টি আছে কিনা। এই আর্টিকেলটি JavaScript ব্যবহার করে HTML এলিমেন্ট তুলনার দুটি কার্যকর পদ্ধতি এক্সপ্লোর করে।

পদ্ধতি ১: ম্যানুয়াল এলিমেন্ট তুলনা

ম্যানুয়াল তুলনা আপনাকে কোন প্রপার্টি তুলনা করবেন সেটার পুরো কন্ট্রোল দেয়। এই পদ্ধতি সরাসরি নির্দিষ্ট অ্যাট্রিবিউট চেক করে যেমন ট্যাগ নাম, ক্লাস নাম, এবং কন্টেন্ট।

<!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>

গ্রে ব্যাকগ্রাউন্ড সহ তিনটি div এলিমেন্ট প্রদর্শিত। নিচে তুলনার ফলাফল: ✅ First and Second elements are identical ❌ First and Third elements are different

পদ্ধতি ২: 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>

হালকা গ্রে ব্যাকগ্রাউন্ড সহ তিনটি div এলিমেন্ট প্রদর্শিত। নিচে তুলনার ফলাফল: JSON Comparison Results: ✅ Block 1 and Block 2 are identical ❌ Block 1 and Block 3 are different

পদ্ধতিগুলোর তুলনা

উপসংহার

উভয় পদ্ধতিই JavaScript-এ HTML এলিমেন্ট তুলনার কার্যকর উপায় প্রদান করে। নির্দিষ্ট প্রপার্টির ওপর সুনির্দিষ্ট কন্ট্রোলের জন্য ম্যানুয়াল তুলনা ব্যবহার করুন, এবং একাধিক অ্যাট্রিবিউট কার্যকরভাবে তুলনা করার জন্য JSON তুলনা ব্যবহার করুন।