JavaScript में HTML एलिमेंट्स की तुलना: चरण-दर-चरण गाइड

JavaScript में HTML एलिमेंट्स की तुलना डायनामिक वेब एप्लिकेशन बनाते समय एक सामान्य आवश्यकता है। आपको यह जांचने की आवश्यकता हो सकती है कि क्या दो एलिमेंट्स का टैग नाम, क्लास, सामग्री, या अन्य प्रॉपर्टीज समान हैं। यह लेख JavaScript का उपयोग करके HTML एलिमेंट्स की तुलना करने के दो प्रभावी तरीकों का पता लगाता है।

विधि 1: मैनुअल एलिमेंट तुलना

मैनुअल तुलना आपको तुलना करने के लिए किन प्रॉपर्टीज पर पूर्ण नियंत्रण देती है। यह विधि सीधे टैग नाम, क्लास नाम, और सामग्री जैसे विशिष्ट विशेषताओं की जांच करती है।

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>मैनुअल HTML एलिमेंट्स तुलना</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 = [];
// पहला और दूसरा एलिमेंट तुलना करें
if (areElementsSame(firstElement, secondElement)) {
  results.push("✓ पहला और दूसरा एलिमेंट समान हैं");
} else {
  results.push("✗ पहला और दूसरा एलिमेंट भिन्न हैं");
}
// पहला और तीसरा एलिमेंट तुलना करें
if (areElementsSame(firstElement, thirdElement)) {
  results.push("✓ पहला और तीसरा एलिमेंट समान हैं");
} else {
  results.push("✗ पहला और तीसरा एलिमेंट भिन्न हैं");
}
output.innerHTML = results.join("<br>");
</script>
</body>
</html>

ग्रे बैकग्राउंड के साथ तीन डिव एलिमेंट्स प्रदर्शित होते हैं। नीचे, तुलना परिणाम दिखाते हैं:
✓ पहला और दूसरा एलिमेंट समान हैं
✗ पहला और तीसरा एलिमेंट भिन्न हैं

विधि 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-आधारित HTML एलिमेंट्स तुलना</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 = [];
// ब्लॉक 1 और 2 की तुलना करें
if (compareElementsByJSON(block1, block2)) {
  comparisons.push("✓ ब्लॉक 1 और ब्लॉक 2 समान हैं");
} else {
  comparisons.push("✗ ब्लॉक 1 और ब्लॉक 2 भिन्न हैं");
}
// ब्लॉक 1 और 3 की तुलना करें
if (compareElementsByJSON(block1, block3)) {
  comparisons.push("✓ ब्लॉक 1 और ब्लॉक 3 समान हैं");
} else {
  comparisons.push("✗ ब्लॉक 1 और ब्लॉक 3 भिन्न हैं");
}
output.innerHTML = "<h4>JSON तुलना परिणाम:</h4>" + comparisons.join("<br>");
</script>
</body>
</html>

हल्के ग्रे बैकग्राउंड के साथ तीन डिव एलिमेंट्स प्रदर्शित होते हैं। नीचे, तुलना परिणाम दिखाते हैं:
JSON तुलना परिणाम:
✓ ब्लॉक 1 और ब्लॉक 2 समान हैं
✗ ब्लॉक 1 और ब्लॉक 3 भिन्न हैं

विधियों की तुलना

निष्कर्ष

दोनों विधियाँ JavaScript में HTML एलिमेंट्स की तुलना करने के प्रभावी तरीके प्रदान करती हैं। जब आपको विशिष्ट प्रॉपर्टीज पर सटीक नियंत्रण की आवश्यकता हो तो मैनुअल तुलना का उपयोग करें, और जब कई विशेषताओं को कुशलतापूर्वक संभालना हो तो JSON तुलना का उपयोग करें।