HTML DOM contains() মেথড ব্যবহার করা হয় একটি নোড নির্দিষ্ট নোডের ডিসেন্ডেন্ট কিনা তা জানতে। একটি ডিসেন্ডেন্ট হতে পারে নোডের সরাসরি চাইল্ড, গ্রান্ডচাইল্ড বা даже গ্রেট-গ্রান্ডচাইল্ড। এটি বুলিয়ান true রিটার্ন করে যদি নোডটি নির্দিষ্ট নোডের ডিসেন্ডেন্ট হয় এবং false রিটার্ন করে যদি দिये गये নোডের ডিসেন্ডেন্ট না হয়।
সিনট্যাক্স
HTML DOM contains() মেথডের সিনট্যাক্স নিচে দেওয়া হলো -
node.contains(givenNode)
এখানে, givenNode একটি বাধ্যতামূলক প্যারামিটার ভ্যালু যা স্পেসিফাই করে givenNodeটি node-র দ্বারা কন্টেইন করা হচ্ছে কিনা।
উদাহরণ
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>
আউটপুট
এটি নিচের আউটপুট তৈরি করবে -
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."; }
