getElementById। getElementByClass। এই ফাংশনগুলো শুনে থাকতে পারেন। এগুলো জাভাস্ক্রিপ্টে কোনো নির্দিষ্ট এলিমেন্ট সিলেক্ট করতে সাহায্য করে।
একবার এলিমেন্ট সিলেক্ট করলে তার কন্টেন্ট পরিবর্তন করা, স্টেট মডিফাই করা, বা এমনকি সেটিকে লুকিয়ে ফেলাও সম্ভব।
জাভাস্ক্রিপ্টে এলিমেন্ট সিলেক্ট করার আরেকটি ফাংশন রয়েছে: querySelector। এর একটি সিস্টার ফাংশন আছে querySelectorAll, যা নির্দিষ্ট কোয়েরি মিলে যাওয়া সব এলিমেন্ট রিটার্ন করে।
এই গাইডে querySelector এবং querySelectorAll মেথড কীভাবে ব্যবহার করতে হয় তা উদাহরণসহ আলোচনা করব।
querySelector কী?
querySelector একটি ফাংশন যা একটি CSS কোয়েরি মিলে যাওয়া এলিমেন্ট রিটার্ন করে। মনে রাখবেন, এটি শুধু প্রথম মিলে যাওয়া এলিমেন্ট রিটার্ন করে। আপনি যেকোনো CSS সিলেক্টর নির্দিষ্ট করতে পারেন — আইডি, ক্লাস, ট্যাগ নেম, বা যেকোনো কম্বিনেশন।
ব্যবহার পদ্ধতি:
var elementName = document.querySelector('#thisElement');
এছাড়া নেস্টেড এলিমেন্টও সিলেক্ট করা যায়:
var parentElement = document.querySelector('main'); var childElement = parentElement.querySelector('#childElement');
এটি <main> ট্যাগের ভিতরে থাকা #childElement আইডি والے এলিমেন্টটি রিটার্ন করবে।
querySelectorAll একইভাবে কাজ করে, পার্থক্য হলো এটি সব মিলে যাওয়া এলিমেন্টের একটি NodeList রিটার্ন করে:
var allParagraphs = document.querySelectorAll('p');
এটি পেজের সব <p> ট্যাগের একটি লিস্ট দেবে।
কয়েকটি সাধারণ সিলেক্টর উদাহরণ:
p— সব<p>ট্যাগ সিলেক্ট করে।#name_field— "name_field" আইডি वाले এলিমেন্ট সিলেক্ট করে।.list— "list" ক্লাসवाले সব এলিমেন্ট সিলেক্ট করে।div > p—<div>এলিমেন্টের ভিতরে থাকা সব<p>এলিমেন্ট সিলেক্ট করে।
একসাথে একাধিক সিলেক্টরও ব্যবহার করা যায়। CSS সিলেক্টর সম্পর্কে জানতে আমাদের CSS এবং HTML অ্যাট্রিবিউট সিলেক্টর গাইড দেখুন। কোনো মিল না পেলে null রিটার্ন করে।
Query Selector কীভাবে ব্যবহার করবেন
একটি সিম্পল ওয়েব অ্যাপ্লিকেশন বানিয়ে querySelector কীভাবে কাজ করে তা দেখি। একটি ওয়েব পেজ তৈরি করব যা HTML সম্পর্কে একটি ফ্যাক্ট দেখাবে এবং একটি বাটন থাকবে যা ক্লিক করলে "ডার্ক মোড" অন করবে।
ফ্রন্ট-এন্ড সেটআপ
প্রথমে HTML স্ট্রাকচার:
<!DOCTYPE html> <html> <head> <title>HTML Facts!</title> <link rel="stylesheet" href="./facts.css"> </head> <body> <div class="mainBox"> <h1 class="text">HTML Facts!</h1> <p class="text">Did you know that HTML is actually based on another markup language, SGML, or Standard Generalized Markup Language?</p> <button type="button">Enable dark mode</button> </div> <script src="./facts.js"></script> </body> </html>
এখন কিছু CSS যোগ করুন (facts.css):
.mainBox { margin: auto; width: 50%; text-align: center; background: hotpink; padding: 5%; } body { background: lightblue; } button { padding: 10px; background: lightgreen; border-radius: 10px; border: none; }
এখন জাভাস্ক্রিপ্টে ডার্ক মোড যোগ করব (facts.js)। প্রথমে ডোম এলিমেন্টগুলো সিলেক্ট করুন:
const heading = document.querySelector("h1"); const paragraph = document.querySelector("p"); const body = document.querySelector("body");
এখন ডার্ক মোড ফাংশন লিখুন যা টেক্সট সাদা এবং ব্যাকগ্রাউন্ড কালো করবে:
function enableDarkMode() { heading.setAttribute("style", "color: white;"); paragraph.setAttribute("style", "color: white;"); body.setAttribute("style", "background-color: black;"); }
এখন বাটনে ক্লিক ইভেন্ট লিসেনার যোগ করুন:
document.querySelector("button").addEventListener("click", enableDarkMode);
বাটনে ক্লিক করলে সাইট ডার্ক মোডে চলে যাবে।
উপসংহার (এবং একটি চ্যালেঞ্জ)
আপনি লক্ষ্য করবেন আমাদের কোড শুধু ডার্ক মোড অন করার অনুমতি দেয়, অফ করার নয়। এটা আপনার জন্য একটি চ্যালেঞ্জ: ডার্ক মোড অফ করার কোড লিখুন।
querySelector মেথড CSS সিলেক্টর কোয়েরি দিয়ে HTML এলিমেন্ট সিলেক্ট করতে দেয় এবং প্রথম মিলে যাওয়া এলিমেন্ট রিটার্ন করে। querySelectorAll দিয়ে সব মিলে যাওয়া এলিমেন্টের লিস্ট পাওয়া যায়।
এখন আপনি একজন জাভাস্ক্রিপ্ট প্রোফেশনালের মতো querySelector ব্যবহার করতে পারবেন!
