HTML DOM childElementCount প্রপার্টি একটি রিড-অনলি প্রপার্টি যা একটি নির্দিষ্ট এলিমেন্টের চাইল্ড এলিমেন্টের সংখ্যা রিটার্ন করে। childElementCount-এর রিটার্ন টাইপ অনসাইনড লং। এটি শুধু সেই নোডের চাইল্ড এলিমেন্ট রিটার্ন করবে जिसপরে এটি কোয়েরি করা হয়েছে, পুরো HTML ডকুমেন্টের সকল চাইল্ড নোড নয়।
সিনট্যাক্স
childElementCount প্রপার্টির সিনট্যাক্স নিচে দেওয়া হলো -
node.childElementCount
উদাহরণ
HTML DOM childElementCount প্রপার্টির একটি উদাহরণ দেখি -
<!DOCTYPE html> <html> <head> <style> div { border: 2px solid blue; margin: 7px; padding-left:20px; } </style> </head> <body> <p>নিচের বাটনে ক্লিক করুন div এলিমেন্টের চাইল্ড সংখ্যা জানতে</p> <button onclick="childCount()">COUNT</button> <div id="myDIV"> <h3>HEADING</h3> <p>First p element</p> <p>Second p element</p> </div> <p id="Sample"></p> <script> function childCount() { var x = document.getElementById("myDIV").childElementCount; document.getElementById("Sample").innerHTML = "The div element has "+x+" children"; } </script> </body> </html>
আউটপুট
এটি নিচের আউটপুট তৈরি করবে -
COUNT বাটনে ক্লিক করলে -
উপরের উদাহরণে -
আমরা "myDIV" আইডি সহ একটি <div> এলিমেন্ট তৈরি করেছি যার ভিতরে তিনটি এলিমেন্ট রয়েছে। দুটি <p> এলিমেন্ট এবং একটি <h3> হেডার। আমরা div-কে অন্য এলিমেন্ট থেকে আলাদা করতে রঙিন বর্ডার, মার্জিন এবং প্যাডিং যোগ করেছি -
div { border: 2px solid blue; margin: 7px; padding-left:20px; } <div id="myDIV"> <h3>HEADING</h3> <p>First p element</p> <p>Second p element</p> </div>
তারপর আমরা একটি COUNT বাটন তৈরি করেছি যা ক্লিক করলে childCount() মেথড এক্সিকিউট করবে।
<button onclick="childCount()">COUNT</button>
childCount() মেথড "myDIV" আইডি 가진 এলিমেন্টটি নেয়, যা আমাদের কেসে <div> এলিমেন্ট, এবং এর childElementCount প্রপার্টি ভ্যালু ভেরিয়েবল x-এ অ্যাসাইন করে। যেহেতু <div>-এর ভিতরে দুটি <p> এলিমেন্ট এবং একটি <h3> এলিমেন্ট রয়েছে, তাই childElementCount ৩ রিটার্ন করল।
রিটার্ন করা মানটি "Sample" আইডি 가진 প্যারাগ্রাফে innerHTML() মেথড ব্যবহার করে দেখানো হয়েছে -
function childCount() { var x = document.getElementById("myDIV").childElementCount; document.getElementById("Sample").innerHTML = "The div element has "+x+" children"; }
