HTML DOM getElementById() পদ্ধতি

HTML DOM getElementById() পদ্ধতিটি এই ফাংশনে একটি প্যারামিটার হিসাবে একটি আইডি পাস করে একটি উপাদান ফেরত দেওয়ার জন্য ব্যবহৃত হয়। উপাদানগুলিকে পরবর্তীতে ম্যানিপুলেট করার জন্য এটি সর্বাধিক ব্যবহৃত এবং সহজতম পদ্ধতিগুলির মধ্যে একটি। যদি নির্দিষ্ট আইডিটি বিদ্যমান না থাকে তবে এটি 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() example</h1>
<a id="LINK1" href="https://www.google.com">GOOGLE</a>
<p>Click the below button to apply styling to the above link</p>
<button onclick="changeLink()">CHANGE</button>
</body>
</html>

আউটপুট

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

তৈরি করবে

HTML DOM getElementById() পদ্ধতি

চেঞ্জ বোতামে ক্লিক করলে -

HTML DOM getElementById() পদ্ধতি

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

আমরা প্রথমে "LINK1" আইডি সহ একটি অ্যাঙ্কর উপাদান তৈরি করেছি এবং href অ্যাট্রিবিউট মান "https://www.google.com" এ সেট করেছি৷

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

৷

তারপরে আমরা একটি পরিবর্তন বোতাম তৈরি করেছি যা ব্যবহারকারীর দ্বারা ক্লিক করলে changeLink() কার্যকর করবে -

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

changeLink() পদ্ধতিটি নথি বস্তু getElementById() পদ্ধতি ব্যবহার করে উপাদান পায় এবং প্যারামিটার হিসাবে উপাদান আইডি পাস করে। এটি তখন সেই উপাদানটি ফেরত দেয় যা আমরা ভেরিয়েবল l এ বরাদ্দ করি। গ্লোবাল স্টাইল অ্যাট্রিবিউট ব্যবহার করে আমরা অ্যাঙ্কর ট্যাগের জন্য রঙ এবং ফন্ট সাইজ প্রপার্টি মান সেট করি -

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