HTML DOM getElementById() মেথড

HTML DOM getElementById() মেথড একটি id প্যারামিটার হিসেবে পাস করে এলিমেন্ট রিটার্ন করতে ব্যবহৃত হয়। এটি সবচেয়ে সাধারণভাবে ব্যবহৃত এবং সহজ মেথড এলিমেন্ট পেতে যাতে পরে সেগুলো ম্যানিপুলেট করা যায়। নির্দিষ্ট Id না থাকলে এটি NULL রিটার্ন করে।

সিনট্যাক্স

getElementById() মেথডের সিনট্যাক্স:

document.getElementById(elementID)

উদাহরণ

getElementById() মেথডের উদাহরণ:

<!DOCTYPE html> <html> <head> <script>    function changeLink() {       var l = document.getElementById("LINK1");       l.style.color = "red";       l.style.fontSize="40px";    } </script> </head> <body> <h1>getElementById() উদাহরণ</h1> <a id="LINK1" href="https://www.google.com">GOOGLE</a> <p>উপরের লিংকে স্টাইলিং প্রয়োগ করতে নিচের বাটনে ক্লিক করুন</p> <button onclick="changeLink()">CHANGE</button> </body> </html>

আউটপুট

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

HTML DOM getElementById() মেথড

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

HTML DOM getElementById() মেথড

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

প্রথমে id “LINK1” এবং href অ্যাট্রিবিউটের মান “https://www.google.com” সেট করে একটি অ্যানকর এলিমেন্ট তৈরি করা হয়েছে।

<a id="LINK1" href="https://www.google.com">GOOGLE</a>

তারপর CHANGE বাটন তৈরি করা হয়েছে যা ইউজার ক্লিক করলে changeLink() এক্সিকিউট করবে:

<button onclick="changeLink()">CHANGE</button>

changeLink() মেথড ডকুমেন্ট অবজেক্টের getElementById() মেথড ব্যবহার করে <a> এলিমেন্ট পাওয়া এবং <a> এলিমেন্টের id প্যারামিটার হিসেবে পাস করা। এটি এলিমেন্ট রিটার্ন করে যা l ভেরিয়েবলে অ্যাসাইন করা হয়েছে। গ্লোবাল style অ্যাট্রিবিউট ব্যবহার করে অ্যানকর ট্যাগের color এবং fontSize প্রপার্টির মান সেট করা হয়েছে:

function changeLink() {    var l = document.getElementById("LINK1");    l.style.color = "red";    l.style.fontSize="40px"; }