HTML DOM Caption অবজেক্ট

HTML DOM Caption অবজেক্টটি HTML <caption> এলিমেন্টের সাথে সম্পর্কিত। <caption> এলিমেন্টটি টেবিলের ক্যাপশন (শিরোনাম) সেট করার জন্য ব্যবহৃত হয় এবং টেবিলের প্রথম চাইল্ড হওয়া উচিত। আপনি ক্যাপশন এলিমেন্ট ক্যাপশন অবজেক্ট ব্যবহার করে অ্যাক্সেস করতে পারেন।

প্রপার্টি

দ্রষ্টব্য: নিচের প্রপার্টি HTML5-এ সাপোর্টেড নয়।

HTML DOM Caption অবজেক্ট প্রপার্টি নিচে দেওয়া হলো -

সিনট্যাক্স

নিচে দেওয়া হলো -

Caption অবজেক্ট তৈরি করার সিনট্যাক্স -

var x = document.createElement("CAPTION");

উদাহরণ

HTML DOM Caption অবজেক্টের একটি উদাহরণ দেখি -

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px double black; margin-top: 14px; } </style> </head> <body> <p>নিচের বাটনে ক্লিক করুন টেবিলের জন্য ক্যাপশন তৈরি করতে।</p> <button onclick="createCaption()">CREATE</button> <table id="SampleTable"> <tr> <td colspan="2" rowpan="2">TABLE</td> </tr> <tr> <td>Value 1</td> <td>Value 2</td> </tr> </table> <script> function createCaption() { var x = document.createElement("CAPTION"); var t = document.createTextNode("TABLE CAPTION"); x.appendChild(t); var table = document.getElementById("SampleTable") table.insertBefore(x, table.childNodes[0]); } </script> </body> </html>

আউটপুট

এটি নিচের আউটপুট তৈরি করবে -

CREATE বাটনে ক্লিক করলে -

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

আমরা প্রথমে CREATE বাটন তৈরি করেছি যা ক্লিক করলে createCaption() মেথড এক্সিকিউট করবে -

<button onclick="createCaption()">CREATE</button>

createCaption() মেথড ডকুমেন্ট অবজেক্টের createElement() মেথড ব্যবহার করে একটি ক্যাপশন এলিমেন্ট তৈরি করে এবং ভেরিয়েবল x-এ অ্যাসাইন করে। এরপর "TABLE CAPTION" টেক্স্ট সহ একটি টেক্স্ট নোড তৈরি করা হয়েছে। তারপর টেক্স্ট নোডটি এলিমেন্টে অ্যাপেন্ড করা হয়েছে।

অবশেষে, আমরা "SampleTable" আইডি ব্যবহার করে <table> এলিমেন্টটি পেয়ে insertBefore() মেথড ব্যবহার করে ক্যাপশনটিকে টেক্স্ট নোডসহ টেবিলের প্রথম চাইল্ড হিসেবে ইনসার্ট করেছি। <caption> শুধু টেবিলের প্রথম চাইল্ড হতে পারে -

function createCaption() { var x = document.createElement("CAPTION"); var t = document.createTextNode("TABLE CAPTION"); x.appendChild(t); var table = document.getElementById("SampleTable") table.insertBefore(x, table.childNodes[0]); }