JavaScript একটি শক্তিশালী প্রোগ্রামিং ভাষা যা ওয়েব পেজের মধ্যে ডাইনামিক কন্টেন্ট এবং ইন্টারঅ্যাকটিভিটি যুক্ত করতে ব্যবহৃত হয়। ওয়েব পেজের বিভিন্ন উপাদানগুলোর সাথে যোগাযোগের জন্য JavaScript বিভিন্ন ফাংশন এবং মেথড সরবরাহ করে। এর মধ্যে একটি গুরুত্বপূর্ণ মেথড হলো getElementById
getElementById হল একটি DOM (Document Object Model) মেথড যা একটি নির্দিষ্ট HTML উপাদানকে তার id দ্বারা খুঁজে পেতে সাহায্য করে। এই টিউটোরিয়ালে আমরা getElementById এর ব্যাবহার, সুবিধা, অসুবিধা এবং বিভিন্ন উদাহরণ নিয়ে বিস্তারিত আলোচনা করব।
getElementById হলো JavaScript এর একটি মেথড যা HTML ডকুমেন্ট থেকে একটি নির্দিষ্ট id অ্যাট্রিবিউটের মানের সাথে একটি এলিমেন্ট নির্বাচন করতে ব্যবহৃত হয়। এটি সাধারণত ডকুমেন্ট অবজেক্ট মডেল (DOM) এর সাথে কাজ করতে ব্যবহার করা হয়।
নিচে getElementById() সিনট্যাক্স দেকুন।
var element = document.getElementById("id");
বর্ণনা
নিচে একটি উদাওরন দেকুন।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="myDiv">Hello, World!</div> <button onclick="changeText()">Change Text</button> <script> function changeText() { // `myDiv` ID এর সাথে এলিমেন্ট নির্বাচন করা হচ্ছে var div = document.getElementById("myDiv"); // নির্বাচিত এলিমেন্টের টেক্সট কন্টেন্ট পরিবর্তন করা হচ্ছে div.textContent = "Text has been changed!"; } </script> </body> </html>
এই উদাহরণে, HTML ডকুমেন্টে একটি div এলিমেন্ট আছে যার id myDiv। একটি বাটন ক্লিক করলে changeText ফাংশনটি কল হয় যা myDiv আইডির সাথে এলিমেন্টটি নির্বাচন করে এবং তার টেক্সট পরিবর্তন করে।
getElementById শুধুমাত্র id দিয়ে একটি একক এলিমেন্ট নির্বাচন করতে পারে।
id হতে হবে ইউনিক (একই id একাধিক এলিমেন্টে থাকতে পারে না)।
এটি null রিটার্ন করতে পারে যদি নির্দিষ্ট id এর সাথে কোনো এলিমেন্ট না পাওয়া যায়।
এটি ওয়েব পেজের এলিমেন্টের সাথে ইন্টারঅ্যাক্ট করার একটি গুরুত্বপূর্ণ মেথড এবং অনেক ওয়েব ডেভেলপার এর মাধ্যমে DOM এর সাথে কার্যকরীভাবে কাজ করেন।
getElementById এর কিছু সুবিধা এবং অসুবিধা রয়েছে। নিচে এগুলো দেকুন।
সুবিধা
অসুবিধা
getElementById এর উন্নত ব্যবহার এবং ফর্ম ইনপুট ফিল্ড ব্যবহার করার জন্য কোড গুলো নিচে দেকুন।
<!DOCTYPE html> <html> <head> <title>ফর্ম উদাহরণ</title> <script> function displayInput() { var userInput = document.getElementById('userInput').value; var output = document.getElementById('output'); output.innerHTML = 'আপনার ইনপুট: ' + userInput; } </script> </head> <body> <input type="text" id="userInput" placeholder="আপনার নাম লিখুন"> <button onclick="displayInput()">ডিসপ্লে করুন</button> <p id="output"></p> </body> </html>
getElementById এর উন্নত ব্যবহার এবং CSS স্টাইল পরিবর্তন করার জন্য কোড গুলো নিচে দেকুন।
<!DOCTYPE html> <html> <head> <title>CSS পরিবর্তন উদাহরণ</title> <style> .highlight { background-color: yellow; font-weight: bold; } </style> <script> function applyHighlight() { var element = document.getElementById('highlightedText'); element.className = 'highlight'; } </script> </head> <body> <p id="highlightedText">এই প্যারাগ্রাফটি হাইলাইট করা হবে</p> <button onclick="applyHighlight()">হাইলাইট করুন</button> </body> </html>
getElementById হল JavaScript এর একটি গুরুত্বপূর্ণ মেথড যা HTML উপাদানগুলোকে id দ্বারা সহজে নির্বাচন করতে সক্ষম করে। এটি ওয়েব ডেভেলপমেন্টের অনেক ক্ষেত্রে ব্যবহৃত হয় যেমন ডাইনামিক কন্টেন্ট আপডেট, ফর্ম ডাটা সংগ্রহ, এবং CSS স্টাইল পরিবর্তন। তবে, id এর একক ব্যবহার এবং ডাইনামিক কন্টেন্টের সীমাবদ্ধতা কিছু অসুবিধার সৃষ্টি করতে পারে।