HTML DOM contains() मेथड का उपयोग यह पता लगाने के लिए किया जाता है कि कोई नोड निर्दिष्ट नोड का वंशज (descendant) है या नहीं। एक वंशज नोड का तत्काल चाइल्ड, ग्रैंडचाइल्ड और यहां तक कि ग्रेट-ग्रैंडचाइल्ड हो सकता है। यह बूलियन true वापस करता है जो दर्शाता है कि नोड वास्तव में निर्दिष्ट नोड का वंशज है और false अगर यह दिए गए नोड का वंशज नहीं है।
सिंटैक्स (Syntax)
HTML DOM contains() मेथड का सिंटैक्स:
node.contains(givenNode)
यहां, givenNode एक अनिवार्य पैरामीटर वैल्यू है जो निर्दिष्ट करता है कि givenNode नोड द्वारा समाहित है या नहीं।
उदाहरण (Example)
HTML DOM contains() मेथड का एक उदाहरण:
<!DOCTYPE html> <html> <head> <style> #DIV1 { border: 2px solid blue; width: 160px; } </style> </head> <body> <div id="DIV1"> <p>I live in the <attr id="At" title="United States of America">U.S.A </attr></p> </div> <p>attr एलिमेंट div एलिमेंट का वंशज है या नहीं जानने के लिए नीचे दिए गए बटन पर क्लिक करें</p> <button type="button" onclick="divDesc()">CONTAINS</button> <p id="Sample"></p> <script> function divDesc() { var attr = document.getElementById("At"); var div = document.getElementById("DIV1").contains(attr); if (div == true) document.getElementById("Sample").innerHTML = "Span element is the descendant of the div element."; else document.getElementById("Sample").innerHTML = "Span element is not the descendant of the div element."; } </script> </body> </html>आउटपुट (Output)
इससे निम्नलिखित आउटपुट प्राप्त होगा:
DESCENDANT बटन पर क्लिक करने पर:
उपरोक्त उदाहरण में:
हमने "DIV1" आईडी वाला एक <div> एलिमेंट बनाया है जिसके अंदर एक <p> एलिमेंट है और <p> एलिमेंट के अंदर <attr> एलिमेंट है। "DIV1" पर बॉर्डर लागू किया गया है और CSS स्टाइल्स का उपयोग करके इसकी चौड़ाई निर्दिष्ट की गई है:
#DIV1 { border: 2px solid blue; width: 160px; } <div id="DIV1"> <p>I live in the <attr id="At" title="United States of America">U.S.A </attr></p> </div>फिर हमने एक CONTAINS बटन बनाया जो यूजर द्वारा क्लिक किए जाने पर divDesc() मेथड को एक्जीक्यूट करता है:
<button type="button" onclick="divDesc()">CONTAINS</button>
divDesc() मेथड डॉक्यूमेंट ऑब्जेक्ट के getElementById() मेथड का उपयोग करके <attr> एलिमेंट को प्राप्त करता है और इसे attr वेरिएबल में असाइन करता है। फिर यह <div> एलिमेंट के contains मेथड का उपयोग करता है और <attr> एलिमेंट को पैरामीटर के रूप में पास करता है।
चूंकि <div> एलिमेंट <attr> एलिमेंट को समाहित करता है यानी <attr> एलिमेंट <div> एलिमेंट का वंशज है, यह true वापस करता है। कंडीशनल स्टेटमेंट्स का उपयोग करके हम "Sample" आईडी वाले पैराग्राफ में innerHTML प्रॉपर्टी का उपयोग करके उपयुक्त टेक्स्ट प्रदर्शित करते हैं:
function divDesc() { var attr = document.getElementById("At"); var div = document.getElementById("DIV1").contains(attr); if (div == true) document.getElementById("Sample").innerHTML = "Span element is the descendant of the div element."; else document.getElementById("Sample").innerHTML = "Span element is not the descendant of the div element."; }
