एचटीएमएल डोम तुलना दस्तावेज़ स्थिति () विधि

<घंटा/>

HTML DOM ComparDocumentPosition () विधि का उपयोग किसी भी दस्तावेज़ में किसी नोड की स्थिति की तुलना किसी अन्य नोड से करने के लिए किया जाता है। दस्तावेज़ में उनकी स्थिति का वर्णन करने के लिए इस पद्धति का रिटर्न प्रकार पूर्णांक प्रकार का है। पूर्णांक वापसी मान निर्दिष्ट किए गए हैं -

1: No relationship, the two nodes do not belong to the same document.
2: The first node (para1) is positioned after the second node (para2).
4: The first node (para1) is positioned before the second node (para2).
8: The first node (para1) is positioned inside the second node (para2).
16: The second node (para2) is positioned inside the first node (para1).
32: No relationship, or the two nodes are two attributes on the same element.

सिंटैक्स

HTML DOM के लिए सिंटैक्स निम्नलिखित है तुलना दस्तावेज़ स्थिति () विधि -

node.compareDocumentPosition(node)

यहां, नोड प्रकार नोड ऑब्जेक्ट का है और उस नोड को निर्दिष्ट करता है जिसे हम वर्तमान नोड से तुलना करना चाहते हैं।

उदाहरण

आइए तुलना दस्तावेज़ स्थिति () विधि के लिए एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<body>
<p id="para1">This is a paragraph</p>
<p id="para2">This is another paragraph</p>
<p>Click the button to compare the position of the two paragraphs.</p>
<button onclick="docPosition()">POSITION</button>
<p id="Sample"></p>
<script>
   function docPosition() {
      var p1 = document.getElementById("para1").lastChild;
      var p2 = document.getElementById("para2").lastChild;
      var x = p2.compareDocumentPosition(p1);
      document.getElementById("Sample").innerHTML = x;
   }
</script>
</body>
</html>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

एचटीएमएल डोम तुलना दस्तावेज़ स्थिति () विधि

स्थिति बटन पर क्लिक करने पर -

एचटीएमएल डोम तुलना दस्तावेज़ स्थिति () विधि

उपरोक्त उदाहरण में -

हमने पहले दो बनाए हैं

"para1" और "para2" आईडी वाले तत्व।

<p id="para1">This is a paragraph</p>
<p id="para2">This is another paragraph</p>

हमने तब एक बटन बनाया है POSTION जो उपयोगकर्ता द्वारा क्लिक किए जाने पर docPosition () विधि को निष्पादित करेगा -

<button onclick="docPosition()">POSITION</button>

दस्तावेज़ ऑब्जेक्ट पर getElementById () विधि का उपयोग करके docPosition () विधि दोनों

तत्व प्राप्त करती है। इसके बाद यह दोनों पैराग्राफों के लास्टचाइल्ड प्रॉपर्टी वैल्यू को क्रमशः वेरिएबल p1 और p2 को असाइन करता है।

फिर हम पैरामीटर के रूप में p1 के साथ p2 पर ComparDocumentPosition () विधि को कॉल करते हैं। इसका मतलब है कि हम p1 के संबंध में p2 की स्थिति की तुलना करना चाहते हैं। चूँकि यहाँ p2 p1 के बाद स्थित है, इसलिए वापसी मान 2 है -

function docPosition() {
   var p1 = document.getElementById("para1").lastChild;
   var p2 = document.getElementById("para2").lastChild;
   var x = p2.compareDocumentPosition(p1);
   document.getElementById("Sample").innerHTML = x;
}