HTML DOM children প্রপার্টি নির্দিষ্ট এলিমেন্টের সকল চাইল্ড এলিমেন্টের HTML কালেকশন রিটার্ন করতে ব্যবহৃত হয়। এটি শুধুমাত্র একটি রিড-অনলি প্রপার্টি। প্রাপ্ত এলিমেন্টগুলো ০ থেকে শুরু হওয়া ইনডেক্স নম্বর ব্যবহার করে অ্যাক্সেস করা যায়।
এলিমেন্টগুলো HTML ডকুমেন্টে যেভাবে থাকে সেভাবেই ক্রমানুসারে থাকে। এটি শুধু চাইল্ড নোড ধারণ করে এবং childNodes প্রপার্টির মতো হোয়াইটস্পেস এবং কমেন্ট অন্তর্ভুক্ত করে না।
সিনট্যাক্স
children প্রপার্টির সিনট্যাক্স নিচে দেওয়া হলো -
element.children
HTML DOM children প্রপার্টির একটি উদাহরণ দেখি -
<!DOCTYPE html> <html> <head> <style> div { border: 1px solid blue; margin: 7px; } </style> </head> <body> <p>নিচের বাটনে ক্লিক করুন div এলিমেন্টের চাইল্ড সংখ্যা জানতে</p> <button onclick="myChild()">COUNT</button> <div id="DIV1"> <p>First p element </p> <p>Second p element </p> </div> <p id="Sample"></p> <script> function myChild() { var x = document.getElementById("DIV1").children.length; document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes"; } </script> </body> </html>
আউটপুট
এটি নিচের আউটপুট তৈরি করবে -
COUNT বাটনে ক্লিক করলে -
উপরের উদাহরণে -
আমরা "DIV1" আইডি সহ একটি <div> এলিমেন্ট তৈরি করেছি যার ভিতরে দুটি প্যারাগ্রাফ রয়েছে। এটিকে অন্য এলিমেন্ট থেকে আলাদা করতে বর্ডার এবং মার্জিন যোগ করা হয়েছে -
div { border: 1px solid blue; margin: 7px; } <div id="DIV1"> <p>First p element </p> <p>Second p element</p> </div>
তারপর আমরা একটি COUNT বাটন তৈরি করেছি যা ইউজার ক্লিক করলে myChild() ফাংশন এক্সিকিউট করবে -
<button onclick="myChild()">COUNT</button>
myChild() ফাংশন "DIV1" আইডি 가진 এলিমেন্টটি পেয়ে তার children.length প্রপার্টি ভ্যালু ভেরিয়েবল x-এ অ্যাসাইন করে। গুরুত্বপূর্ণ বিষয় হলো children প্রপার্টি হোয়াইটস্পেস এবং কমেন্ট বিবেচনা করে না তাই শুধু দুটি <p> এলিমেন্ট বিবেচনা করবে এবং children.length ২ রিটার্ন করবে। এই মানটি "Sample" আইডি 가진 প্যারাগ্রাফে innerHTML() মেথড ব্যবহার করে দেখানো হয়েছে -
function myChild() { var x = document.getElementById("DIV1").children.length; document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes"; }
