HTML DOM শিশুদের সম্পত্তি

HTML DOM চিলড্রেন প্রপার্টি HTML সংগ্রহের আকারে নির্দিষ্ট এলিমেন্টের সমস্ত চাইল্ড এলিমেন্ট ফেরত দিতে ব্যবহৃত হয়। এটি শুধুমাত্র একটি পঠনযোগ্য সম্পত্তি। প্রাপ্ত উপাদানগুলি তারপর সূচক সংখ্যা ব্যবহার করে অ্যাক্সেস করা যেতে পারে যা 0 থেকে শুরু হয়।

উপাদানগুলি HTML ডকুমেন্টের মতো একই ক্রমে উপস্থিত হয়। এটিতে শুধুমাত্র চিলড্রেন নোড রয়েছে এবং হোয়াইটস্পেস এবং চাইল্ড নোড সম্পত্তির মতো মন্তব্যগুলি অন্তর্ভুক্ত করে না৷

সিনট্যাক্স

শিশুদের সম্পত্তির জন্য সিনট্যাক্স নিচে দেওয়া হল -

element.children

আসুন আমরা HTML DOM চিলড্রেন প্রপার্টি -

এর একটি উদাহরণ দেখি

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      border: 1px solid blue;
      margin: 7px;
   }
</style>
</head>
<body>
<p>Click the button below to find out the number of div element children</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>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

HTML DOM শিশুদের সম্পত্তি

COUNT বোতামে ক্লিক করলে -

HTML DOM শিশুদের সম্পত্তি

উপরের উদাহরণে -

আমরা একটি

তৈরি করেছি আইডি "DIV1" সহ উপাদান এবং এর ভিতরে দুটি অনুচ্ছেদ রয়েছে। আমরা এটিকে অন্যান্য উপাদান থেকে আলাদা করতে একটি রঙের সীমানা এবং কিছু মার্জিন যুক্ত করেছি -

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.length 2 প্রদান করবে। এই মানটি ভিতরের HTML( ব্যবহার করে "নমুনা" আইডি সহ অনুচ্ছেদে প্রদর্শিত হয়। ) পদ্ধতি -

function myChild() {
   var x = document.getElementById("DIV1").children.length;
   document.getElementById("Sample").innerHTML = "The div element has "+x+" child nodes";
}