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