জাভাস্ক্রিপ্টে getElementsByClassName একটি গুরুত্বপূর্ণ মেথড যা HTML ডকুমেন্টে নির্দিষ্ট ক্লাস নামের সাথে সমস্ত এলিমেন্ট সনাক্ত করতে ব্যবহৃত হয়। এই মেথডটি ডকুমেন্ট অবজেক্ট মডেল (DOM) এর অংশ এবং এর মাধ্যমে একাধিক এলিমেন্টকে একটি ক্লাস নামের মাধ্যমে একসাথে গ্রুপ করা যায়। এই টিউটোরিয়ালে আমরা getElementsByClassName মেথডটির বিস্তারিত আলোচনা করব এবং উদাহরণের মাধ্যমে এর কার্যকারিতা, সুবিধা এবং অসুবিধাগুলি ব্যাখ্যা করব।
getElementsByClassName মেথডটি একটি HTML ডকুমেন্টে একটি নির্দিষ্ট ক্লাস নামের সাথে সমস্ত এলিমেন্টের একটি লাইভ HTMLCollection প্রদান করে। লাইভ HTMLCollection মানে হল যে এটি ডকুমেন্টে পরিবর্তন হলে আপডেট হয়। এর মাধ্যমে আপনি একাধিক এলিমেন্টকে একসাথে টার্গেট করতে পারেন এবং তাদের পরিবর্তন করতে পারেন।
নিচে getElementsByClassName মেথড এর সিনট্যাক্স দেকুন।
var elements = document.getElementsByClassName(classNames);
একানে classNames অল একটি বা একাধিক ক্লাস নামের স্ট্রিং। যদি একাধিক ক্লাস নাম থাকে, তবে তাদের মধ্যে স্পেস দিয়ে পৃথক করতে হবে। Return Value অল একটি লাইভ HTMLCollection অবজেক্ট, যা নির্দিষ্ট ক্লাস নামের সাথে সমস্ত এলিমেন্ট ধারণ করে।
ধরি আমাদের একটি HTML ডকুমেন্ট রয়েছে যেখানে কিছু ক্লাস নাম দেওয়া আছে। নিচে এর জন্য কোডগ গুলো দেকুন।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GetElementsByClassName Example </head> <body> <div class="box red">Red Box 1</div> <div class="box blue">Blue Box 1</div> <div class="box red">Red Box 2</div> <div class="box blue">Blue Box 2</div> <script> // Get all elements with class name 'red' var redBoxes = document.getElementsByClassName('red'); // Iterate through the NodeList and change their background color for (var i = 0; i < redBoxes.length; i++) { redBoxes[i].style.backgroundColor = 'lightcoral'; } </script> </body> </html>
এই উদাহরণে, getElementsByClassName('red') মেথডটি সব .red ক্লাস নামের এলিমেন্টগুলোকে একটি লাইভ HTMLCollection হিসেবে প্রদান করবে। তারপর আমরা একটি লুপ ব্যবহার করে তাদের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করেছি।
আকানে আমরা একাধিক ক্লাস নামের সাথে একটি উদাহরণ দেকব। ধরি, আমাদের কিছু এলিমেন্টে একাধিক ক্লাস আছে এবং আমরা তাদের মধ্যে কিছু এলিমেন্ট সিলেক্ট করতে চাই। এর জন্য নিচের কোড গুলো দেকুন।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GetElementsByClassName Multiple Classes Example</title> </head> <body> <div class="container highlight">Container Highlight</div> <div class="container">Container</div> <div class="highlight">Highlight</div> <div class="container highlight">Container Highlight Again</div> <script> // Get all elements with class name 'container highlight' var elements = document.getElementsByClassName('container highlight'); // Change their text color for (var i = 0; i < elements.length; i++) { elements[i].style.color = 'blue'; } </script> </body> </html>
এখানে, getElementsByClassName('container highlight') মেথডটি সমস্ত এলিমেন্টে উভয় ক্লাস থাকা এলিমেন্ট গুলো ফিরিয়ে দিবে। তারপর আমরা তাদের টেক্সটের রঙ পরিবর্তন করেছি।
সুবিধা
অসুবিধা
querySelectorAll
querySelectorAll পদ্ধতিটি CSS সিলেক্টর ব্যবহার করে এলিমেন্ট সিলেক্ট করতে পারে এবং এটি একটি স্ট্যাটিক NodeList প্রদান করে, যা লাইভ নয়। উদাহরণস্বরূপ নিচের কোড গুলো দেকুন।
var elements = document.querySelectorAll('.container.highlight');
getElementById
getElementById পদ্ধতি শুধুমাত্র একটি নির্দিষ্ট ID এর এলিমেন্ট ফিরিয়ে দেয় এবং এটি লাইভ নয়। নিচে এর উদাহরণস্বরূপ কোড গুলো দেকুন।
var element = document.getElementById('myElement');
getElementsByClassName একটি শক্তিশালী পদ্ধতি যা HTML ডকুমেন্টে একটি নির্দিষ্ট ক্লাস নাম দ্বারা একাধিক এলিমেন্ট সিলেক্ট করতে সহায়তা করে। এটি পারফরমেন্সের দিক থেকে কার্যকরী এবং সহজে ব্যবহারযোগ্য হলেও কিছু সীমাবদ্ধতা রয়েছে যেমন লাইভ HTMLCollection এবং ক্লাস নামের প্রাধান্য। এর সাথে তুলনামূলকভাবে অন্যান্য পদ্ধতির বৈশিষ্ট্য জানলে উন্নত কোডিং অভিজ্ঞতা পাওয়া যায়।
এটি নিশ্চিত করার জন্য যে আপনি সঠিকভাবে getElementsByClassName ব্যবহার করছেন এবং আপনার প্রকল্পে সর্বোত্তম অভিজ্ঞতা লাভ করছেন, এই মেথডটির সব সুবিধা এবং অসুবিধা বোঝা গুরুত্বপূর্ণ।