তো, আপনি জাভাস্ক্রিপ্টে একটি ওয়েব পেজের এলিমেন্ট সিলেক্ট করতে চান? সেটিই getElementById মেথডের স্পেশ্যালিটি, যাকে জাভাস্ক্রিপ্টে এলিমেন্ট getters-র রাজা বলা হয়।
getElementById আপনাকে একটি এলিমেন্ট তার ID ভিত্তিক করে সিলেক্ট করতে দেয়। চিন্তা করলে এটি কয়েকটা স্বয়ংস্ফূর্ত মেথড নাম।
এই গাইডে, আমরা getElementById কী, কীভাবে কাজ করে, এবং আপনার কোডে কখন এটি ব্যবহার করা উচিত তা আলোচনা করব। আমরা আমাদের document.getElementById ডেমোতে একটি "Show/hide" টেক্সট বাটনের উদাহরণ দেখব।
চলুন শুরু করি!
getElementById কী?
getElementById() হল একটি Document মেথড যা আপনার দ্বারা স্পেসিফাই করা এলিমেন্ট ID অ্যাট্রিবিউটের ভিত্তিতে HTML DOM-এ একটি পেজ থেকে একটি এলিমেন্ট সিলেক্ট করে।
নিচের কোড বিবেচনা করুন:
index.html <button id="mainButton">This is a button!</button> scripts.js const button = document.getElementById("mainButton");
আমাদের HTML কোডে, আমরা একটি <button> এলিমেন্ট সংজ্ঞায়িত করেছি যেটির ID mainButton। আমাদের জাভাস্ক্রিপ্ট কোড getElementById() মেথড ব্যবহার করে এই কম্পোনেন্টটি রিট্রিভ করবে।
এই মেথডটি উপকারী যদি আপনি একটি পেজে একক এলিমেন্ট রিট্রিভ করতে চান। আপনি যদি HTML এবং CSS শেখার সময় মনে করুন, আপনি জানবেন যে ID গুলো যুনিক হতে হয়। এটি getElementById()-কে সিঙ্গেল এলিমেন্ট রিট্রিভ করার জন্য পরফেক্ট করে তোলে।
আপনি এই মেথড ব্যবহার করতে পারেন যদি আপনি একটি এলিমেন্টে ID বরাদ্দ করেছেন। একটি বродеার getter seperti querySelector বা getElementByClass ব্যবহার করার বদলে, যা একটি নির্দিষ্ট ক্রাইটেরিয়া পূরণ করা প্রথম এলিমেন্ট অবজেক্ট রিটার্ন করে, আপনি getElementById() ব্যবহার করে একটি এলিমেন্ট রিট্রিভ করতে পারেন।
getElementById() একটি ওয়েব পেজে আইটেম রিট্রিভ করার জন্য একটি কমন মেথড।
getElementById সম্পর্কে জানা দরকার কিছু বিষয়
একটি উদাহরণে যাওয়ার আগে, আমরা এই মেথড ব্যবহার করার সময় বেগিনাররা যে সাধারণ ভুলগুলো করেন সেগুলো নিয়ে কথা বলব।
যখন আপনি কিছু নতুন শিখছেন এবং সেটি কাজ করে না, সেটা সবসময় নারাজ করা বিষয়। তাই, আসুন যেসব সাধারণ এরর আপনি getElementById() শেখার সময় করতে পারেন সেগুলো নিয়ে আলোচনা করি।
প্রথম, getElementById() কেস-সেনসিটিভ। প্রোগ্রামিং-এ ID টার্ম সাধারণত ক্যাপিটালাইজড থাকে, কিন্তু আপনি এই মেথড ব্যবহার করার সময় ক্যামেল কেস Id ব্যবহার করতে হবে। অন্যথায়, এই মেথড কাজ করবে না।
দ্বিতীয়, আপনি যে ID স্পেসিফাই করবেন সেটিতে পাউন্ড সাইন (হ্যাশট্যাগ) থাকা উচিত নয়। এই কোডটি বিবেচনা করুন:
const button = document.getElementById("#mainButton");
এই উদাহরণটি দেখতে লাগে যেন এটি mainButton ID-वाले এলিমেন্টটি রিট্রিভ করবে, কিন্তু এसा নয়। আপনি শুধু যে এলিমেন্টটি রিট্রিভ করতে চান তার ID স্পেসিফাই করবেন:
const button = document.getElementById("mainButton");
এটি ঠিক করলে, আমরা একটি উদাহরণের মাধ্যমে যেতে পারি।
getElementById কীভাবে ব্যবহার করবেন
যখন আপনি ওয়েব ব্রাউজ করছেন, আপনি "Read more" লিখা ট্যাগগুলো দেখতে পেতে পারেন। একটি ওয়েব পেজ একটি লেখার কিছু সেন্টেন্স দেখাতে পারে, এবং তারপর আপনাকে সেই বাটনটি প্রেস করতে বলতে পারে যাতে আপনি লেখার বাকি অংশটি দেখতে পারেন।
আমরা getElementById() গেটার ব্যবহার করে সেই ফিচারটি বানাব। আপনি এই টিউটোরিয়ালের ফাইনাল কোড GitHub-এ দেখতে পারেন।
ফ্রন্ট-এন্ড তৈরি করা
HTML এবং CSS ব্যবহার করে একটি সিম্পল ফ্রন্ট-এন্ড তৈরি করে শুরু করি। index.html নামে একটি নতুন ফাইল তৈরি করুন এবং নিচের কোড পেস্ট করুন:
<!DOCTYPE html> <html> <head> <title>An Introduction to getElementById()</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div> <h1>JavaScript getElementById()</h1> <p>Are you looking to learn more about getElementById()? You've come to the right place.</p> <span id="showMore">Read more</span> <p id="hiddenText">getElementById() is a JavaScript method that allows you to select an element on a web page. This method is commonly referred to as a "getter" because it "gets" an element from a page.</p> </div> </body> <script src="scripts.js"></script> </html>
এই ডকুমেন্টে, আমরা getElementById() মেথড সম্পর্কে ইনফরমেশন ধারণকারী একটি বক্স সংজ্ঞায়িত করেছি। আমাদের বক্সে একটি টাইটেল, টেক্সটের দুটি প্যারাগ্রাফ, এবং একটি স্প্যান HTML ট্যাগ আছে যা আমরা লাস্ট প্যারাগ্রাফ রিভিল করতে ব্যবহার করব।
styles.css নামে একটি ফাইল খুলুন এবং এই কোড পেস্ট করুন:
<!DOCTYPE html> <html> <head> <title>An Introduction to getElementById()</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div> <h1>JavaScript getElementById()</h1> <p>Are you looking to learn more about getElementById()? You've come to the right place.</p> <span id="showMore">Read more</span> <p id="hiddenText">getElementById() is a JavaScript method that allows you to select an element on a web page. This method is commonly referred to as a "getter" because it "gets" an element from a page.</p> </div> </body> <script src="scripts.js"></script> </html>
এই কোড আমাদের পেজকে কিছু রং দিয়ে আরও ভিজুয়ালি আপিলিং করে। যখন আপনি ওয়েব পেজ খুলবেন, আপনি নিচেরটি দেখবেন:
একটা সমস্যা আছে: আমাদের "Read more" ট্যাগ কিছুই করে না, এবং আমাদের লাস্ট প্যারাগ্রাফ টেক্সট এখনও ভিজিবল। সেটি কারণ আমরা এখনও আমাদের জাভাস্ক্রিপ্ট কোড যোগ করিনি। চলুন আমাদের ওয়েব পেজের জাভাস্ক্রিপ্ট ফাংশন্যালিটি লিখি।
জাভাস্ক্রিপ্ট কোড যোগ করা
আমরা যেসব এলিমেন্টের সাথে কাজ করতে যাচ্ছি সেগুলো সিলেক্ট করে শুরু করি। যেসব এলিমেন্ট আমাদের সিলেক্ট করতে হবে সেগুলো হলো আমাদের <span> ট্যাগ (যে "Read more" টেক্সট ধারণ করে), এবং যে প্যারাগ্রাফটি আমরা শো এবং হাইডের মধ্যে টগল করতে চাই।
scripts.js নামে একটি ফাইল তৈরি করুন এবং এই কোড পেস্ট করুন:
var paragraph = document.getElementById("hiddenText"); paragraph.style.display = "none";
আমাদের কোডে, আমরা getElementById() ব্যবহার করেছি DOM ডকুমেন্ট থেকে আমাদের প্যারাগ্রাফ রিট্রিভ করতে। hiddenText ডকুমেন্ট অবজেক্ট সিলেক্ট করে এবং এটি হাইড করে। পরের, আমরা একটি ফাংশন তৈরি করব যা আমাদের টেক্সট টগল করবে:
function toggleText() { if (paragraph.style.display === "none") { paragraph.style.display = "block"; } else { paragraph.style.display = "none"; } }
আমরা ID hiddenText ধারণকারী এলিমেন্টটি সিলেক্ট করে শুরু করেছি। এটি সেই প্যারাগ্রাফ টেক্সটকে রেফার করে যা আমরা "Read more" ক্লিক করলে দেখান বা লুকাতে চাই।
আমরা একটি if স্টেটমেন্ট লিখেছি যা চেক করে যে প্যারাগ্রাফটি ভিজিবল কিনা। যদি এটি ভিজিবল না হয়, প্যারাগ্রাফটির display ভ্যালু block-এ সেট হবে, যা এটিকে দেখাবে; অন্যথায়, প্যারাগ্রাফটির display ভ্যালু none-এ সেট হবে, এবং সেটি লুকিয়ে যাবে।
আমাদের কোড এখনো শেষ নয়। পরের, আমরা একটি ইভেন্ট লিসেনার তৈরি করব যা "Read more" টেক্সটে ক্লিক করলে এক্টিভেট হবে:
var showButton = document.getElementById("showMore"); showButton.addEventListener("click", toggleText);
এই কোড আমাদের পেজের Read more টেক্সট সিলেক্ট করে। তারপর এটি একটি ইভেন্ট লিসেনার সেট আপ করে যা "Read more" টেক্সটে ক্লিক করলে আমাদের toggleText() মেথড ট্রিগার করবে।
এখন, আমাদের ওয়েব পেজ খুলি এবং Read more টেক্সটে ক্লিক করে দেখি:
আমাদের কোড ফাংশনাল! যখন আপনি "Read more" টেক্সটে ক্লিক করবেন, টেক্সট দেখাবে। যখন আবার ক্লিক করবেন, টেক্সট লুকিয়ে যাবে।
উপসংহার
getElementById() গেটার আপনাকে একটি ওয়েব পেজ থেকে এর ID ভিত্তিক করে একটি এলিমেন্ট রিট্রিভ করতে দেয়।
আপনি চ্যালেঞ্জ খুঁজছেন? getElementById() গেটার ব্যবহার করে "Read more" এর ভ্যালু "Read less" এ পরিবর্তন করুন যখন টেক্সট ভিজিবল। আরও এগিয়ে যেতে, আপনি পেজে কিছু ইমেজ যোগ করতে পারেন এবং একটি বাটন তৈরি করতে পারেন যা বাটনে ক্লিক করলে সকল ইমেজ হাইড করবে।
এখন আপনি getElementById() গেটার প্রফেশনাল কোডারের মতো ব্যবহার করতে পারবেন!
