কম্পিউটার টিউটোরিয়াল

HTML DOM Figcaption অবজেক্ট


HTML DOM Figcaption অবজেক্ট HTML5 <figcaption> এলিমেন্টকে রিপ্রেজেন্ট করতে ব্যবহৃত হয়। createElement() এবং getElementById() মেথড যথাক্রমে figcaption এলিমেন্ট তৈরি এবং এক্সেস করতে ব্যবহার করা যায়।

সিনট্যাক্স

Figcaption অবজেক্ট তৈরির সিনট্যাক্স:

var p = document.createElement("FIGCAPTION");

উদাহরণ

Figcaption অবজেক্টের উদাহরণ:

<!DOCTYPE html> <html> <head> <script>    function createCaption() {       var caption = document.createElement("FIGCAPTION");       var txt = document.createTextNode("Learn Java Servlets");       caption.appendChild(txt);       var f=document.getElementById("Figure1");       f.appendChild(caption);    } </script> </head> <body> <h2>Caption</h2> <p>নিচের বাটনে ক্লিক করে নিচের ছবির জন্য ক্যাপশন তৈরি করুন</p> <button onclick="createCaption()">CREATE</button> <figure id="Figure1"> <img src="https://www.tutorialspoint.com/servlets/images/servlets-mini-logo.jpg" alt="Servlets" width="250" height="200"> </figure> </body> </html>

আউটপুট

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

HTML DOM Figcaption অবজেক্ট

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

HTML DOM Figcaption অবজেক্ট

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

প্রথমে id “Figure1” সহ একটি figure এলিমেন্ট তৈরি করা হয়েছে যার ভিতরে একটি img এলিমেন্ট আছে:

<figure id="Figure1"> <img src="EiffelTower.jpg" alt="Eiffel Tower" width="250" height="200"> </figure>

তারপর CREATE() বাটন তৈরি করা হয়েছে যা ইউজার ক্লিক করলে createCaption() মেথড এক্সিকিউট করবে:

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

createCaption() মেথড ডকুমেন্ট অবজেক্টের createElement() মেথড ব্যবহার করে figcaption এলিমেন্ট তৈরি করে। ডকুমেন্ট বডির createTextNode() মেথড ব্যবহার করে একটি টেক্সট নোড তৈরি করা এবং figcaption এলিমেন্টে অ্যাপেন্ড করা। তারপর getElementById() মেথড ব্যবহার করে figure এলিমেন্ট পাওয়া এবং figcaption টেক্সট নোডসহ চাইল্ড এলিমেন্ট হিসেবে appendChild() মেথড ব্যবহার করে অ্যাপেন্ড করা হয়েছে:

function createCaption() {    var caption = document.createElement("FIGCAPTION");    var txt = document.createTextNode("Eiffel Tower in Paris,France");    caption.appendChild(txt);    var f=document.getElementById("Figure1");    f.appendChild(caption); }

  1. HTML DOM DFN অবজেক্ট

  2. HTML DOM HR অবজেক্ট

  3. HTML DOM Object অবজেক্ট

  4. HTML DOM Ul অবজেক্ট