<पी> गतिशील वेब एप्लिकेशन बनाते समय जावास्क्रिप्ट में HTML तत्वों की तुलना करना एक सामान्य आवश्यकता है। आपको यह जांचने की आवश्यकता हो सकती है कि क्या दो तत्वों का टैग नाम, वर्ग, सामग्री या अन्य गुण समान हैं। यह आलेख जावास्क्रिप्ट का उपयोग करके HTML तत्वों की तुलना करने के लिए दो प्रभावी तरीकों की खोज करता है। विधि 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 तुलना | नियंत्रण गुणों पर पूर्ण नियंत्रण सभी परिभाषित गुणों की तुलना करता है कुछ गुणों के लिए तेज़ प्रदर्शन कई गुणों के लिए कुशल लचीलापन उच्च अनुकूलन कम अनुकूलन कोड जटिलता बुनियादी तुलनाओं के लिए सरल जटिल तुलनाओं के लिए क्लीनर निष्कर्ष
<पी> दोनों विधियाँ जावास्क्रिप्ट में HTML तत्वों की तुलना करने के प्रभावी तरीके प्रदान करती हैं। जब आपको विशिष्ट गुणों पर सटीक नियंत्रण की आवश्यकता हो तो मैन्युअल तुलना का उपयोग करें, और एकाधिक विशेषताओं से कुशलतापूर्वक निपटने के लिए JSON तुलना का उपयोग करें। <पी> 
