HTML DOM head প্রপার্টি

HTML DOM head প্রপার্টি HTML <head> এলিমেন্টের সাথে জড়িত। এটি <head> এলিমেন্ট রিটার্ন করতে ব্যবহৃত হয়। যদি একাধিক head এলিমেন্ট থাকে তবে এটি প্রথম head এলিমেন্ট রিটার্ন করবে। এটি একটি read-only প্রপার্টি।

সিনট্যাক্স

head প্রপার্টির সিনট্যাক্স:

document.head

উদাহরণ

HTML DOM head প্রপার্টির উদাহরণ:

<!DOCTYPE html> <html> <head> <title>My title</title> </head> <body> <h1>head প্রপার্টি উদাহরণ</h1> <p>নিচের বাটনে ক্লিক করে এই ডকুমেন্টের টাইটেল পান</p> <button onclick="getTitle()">Get Title</button> <p id="Sample"></p> <script>    function getTitle() {       var x = document.head.firstElementChild.innerHTML;       document.getElementById("Sample").innerHTML = "এই ডকুমেন্টের টাইটেল: "+x;    } </script> </body> </html>

আউটপুট

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

“Get Title” বাটনে ক্লিক করলে:

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

প্রথমে একটি <head> এলিমেন্ট তৈরি করা হয়েছে যার ভিতরে একটি <title> এলিমেন্ট আছে যা এই ওয়েব পেজের টাইটেল নির্দিষ্ট করে:

<head> <title>My title</title> </head>

তারপর “Get Title” বাটন তৈরি করা হয়েছে যা ইউজার ক্লিক করলে getTitle() মেথড এক্সিকিউট করবে।

<button onclick="getTitle()">Get Title</button>

getTitle() মেথড ডকুমেন্ট head প্রপার্টি ব্যবহার করে head এলিমেন্ট পাওয়া এবং firstElementChild প্রপার্টি ব্যবহার করে এর প্রথম চাইল্ড এলিমেন্ট পাওয়া যা আমাদের কেসে <title> এলিমেন্ট।

তারপর title এলিমেন্টের ওপর innerHTML প্রপার্টি ব্যবহার করে এর ভিতরের টেক্সট পাওয়া এবং id “Sample” ওয়ালা প্যারাগ্রাফে innerHTML প্রপার্টি ব্যবহার করে প্রদর্শন করা হয়েছে:

function getTitle() {    var x = document.head.firstElementChild.innerHTML;    document.getElementById("Sample").innerHTML = "এই ডকুমেন্টের টাইটেল: "+x; }