জাভাস্ক্রিপ্টে, ' querySelectorAll() ” পদ্ধতিটি প্রথম উপাদানটি পুনরুদ্ধার করে যা নির্দিষ্ট CSS নির্বাচকদের সাথে হুবহু মেলে। এই পদ্ধতিটি এই কাজটি সম্পাদন করার জন্য DOM ট্রি অতিক্রম করা শুরু করে। উপাদানটি পাওয়া গেলে, এটি বিশেষ কাজ সম্পাদন করতে স্ক্রিপ্ট বিভাগে সংজ্ঞায়িত জাভাস্ক্রিপ্ট বিল্ট-ইন বৈশিষ্ট্য বা পদ্ধতি প্রয়োগ করে। এই পদ্ধতিটি সাধারণত প্রয়োজনীয়তা অনুযায়ী লক্ষ্যযুক্ত উপাদান নির্বাচন করতে ব্যবহৃত হয়। এটি ব্যবহারকারীদের নির্দিষ্ট নির্বাচক বা প্রদত্ত সূচকে স্থাপন করা নির্দিষ্ট একটির সাথে মেলে এমন সমস্ত উপাদান নির্বাচন করতে দেয়।
এই নির্দেশিকা জাভাস্ক্রিপ্টে 'querySelectorAll()' পদ্ধতির ব্যবহার ব্যাখ্যা করে।
কিভাবে জাভাস্ক্রিপ্টে “querySelectorAll()” পদ্ধতি ব্যবহার করবেন?
ব্যবহার করতে ' querySelectorAll() ” পদ্ধতিতে, CSS নির্বাচককে এর আর্গুমেন্ট হিসেবে উল্লেখ করুন। সিএসএস নির্বাচকদের মধ্যে 'প্রকার, শ্রেণী এবং আইডি' অন্তর্ভুক্ত থাকে। যদি CSS নির্বাচক অবৈধ হয়, এটি একটি সিনট্যাক্স ত্রুটি প্রদান করে, অন্যথায়, এটি একটি স্ট্যাটিক নোডলিস্ট অবজেক্টকে তার আদর্শ আউটপুট হিসাবে ফেরত দেয়।
বাক্য গঠন
document.querySelectorAll ( সিএসএস নির্বাচক )
উপরের সিনট্যাক্সে, ' সিএসএস নির্বাচক সমস্ত বৈধ CSS নির্বাচকদের উল্লেখ করুন।
চলুন উপরের সংজ্ঞায়িত সিনট্যাক্স ব্যবহারিকভাবে ব্যবহার করা যাক।
HTML কোড
প্রদত্ত HTML কোডের ওভারভিউ:
< h2 ক্লাস = 'ডেমো' > প্রথম শিরোনাম h2 >< h3 ক্লাস = 'ডেমো' > দ্বিতীয় শিরোনাম h3 >
< পি ক্লাস = 'ডেমো' > প্রথম অনুচ্ছেদ পি >
< পি ক্লাস = 'ডেমো' > দ্বিতীয় অনুচ্ছেদ পি >
< বোতাম অনক্লিক = 'jsFunc()' > এখানে ক্লিক করুন ! বোতাম >
কোডের উপরের লাইনগুলিতে:
- দ্য ' ' ট্যাগ 'ডেমো' ক্লাস সহ একটি উপশিরোনাম যোগ করে।
- দ্য ' ' ট্যাগ 'ডেমো' নামের একই ক্লাসের সাথে একটি দ্বিতীয় উপশিরোনাম সংজ্ঞায়িত করে।
- দ্য ' ' ট্যাগগুলি একই শ্রেণীর অনুচ্ছেদ বিবৃতিগুলিকে এমবেড করে যেমন 'ডেমো'।
- দ্য ' <বোতাম> ' ট্যাগ 'jsFunc()' ফাংশন চালানোর জন্য একটি 'অনক্লিক' মাউস ইভেন্ট সহ একটি নতুন বোতাম অন্তর্ভুক্ত করে।
বিঃদ্রঃ: এই নির্দেশিকা জুড়ে নির্দিষ্ট HTML কোড অনুসরণ করা হয়।
উদাহরণ 1: একই শ্রেণীর উপাদান নির্বাচন করতে এবং তাদের রঙ পরিবর্তন করতে 'querySelectorAll()' পদ্ধতি প্রয়োগ করা
এই উদাহরণটি 'demo' ক্লাস ব্যবহার করে এমন সমস্ত উপাদান নির্বাচন করতে 'querySelectorAll()' পদ্ধতি ব্যবহার করে।
জাভাস্ক্রিপ্ট কোড
আসুন নীচের কোডটি পর্যালোচনা করি:
< লিপি >ফাংশন jsFunc ( ) {
const তালিকা = document.querySelectorAll ( '.ডেমো' ) ;
জন্য ( দিন i = 0 ; i < list.length; i++ ) {
তালিকা [ i ] .style.color = 'কমলা লাল' ;
}
}
লিপি >
উপরের কোড লাইনে:
- দ্য ' jsFunc() ” ফাংশন সংজ্ঞায়িত করা হয়েছে।
- এর সংজ্ঞায়, 'তালিকা' ভেরিয়েবলটি ব্যবহার করে ' querySelectorAll() 'ডেমো' ক্লাস থাকা সমস্ত উপাদান নির্বাচন করার পদ্ধতি।
- পরবর্তী, ' জন্য ' লুপ ক্লাস থাকা সমস্ত পাওয়া HTML উপাদানগুলির সাথে পুনরাবৃত্তি করার জন্য একটি নোড তালিকা শুরু করে ' ডেমো ' এবং ' ব্যবহার করে তাদের পাঠ্যের রঙ পরিবর্তন করুন style.color 'সম্পত্তি।
আউটপুট
উপরের আউটপুটে, এটি দেখা যায় যে একই শ্রেণীর নাম অন্তর্ভুক্ত উপাদানগুলির পাঠ্যের রঙ যেমন, 'ডেমো' বোতাম ক্লিক করার পরে পরিবর্তিত হয়েছে।
উদাহরণ 2: নির্দিষ্ট সূচীযুক্ত উপাদান নির্বাচন করতে 'querySelectorAll()' পদ্ধতি প্রয়োগ করা
সমস্ত উপাদান ছাড়াও, ব্যবহারকারী 'ডেমো' ক্লাস সহ নির্দিষ্ট সূচীকৃত উপাদান নির্বাচন করতে পারেন।
জাভাস্ক্রিপ্ট কোড
প্রদত্ত জাভাস্ক্রিপ্ট কোড বিবেচনা করুন:
< লিপি >ফাংশন jsFunc ( ) {
const তালিকা = document.querySelectorAll ( 'h2.demo' ) ;
তালিকা [ 0 ] .style.color = 'সবুজ' ;
}
লিপি >
উপরের কোড স্নিপেটে:
- 'তালিকা' ভেরিয়েবলটি 'h2' উপাদান নির্বাচন করে যার ক্লাসটি 'ডেমো' এর সাহায্যে querySelectorAll() 'পদ্ধতি।
- এর পরে, 'তালিকা' ভেরিয়েবলটি '0' সূচকে স্থাপন করা 'H2' উপাদানটির পাঠ্যের রঙ পরিবর্তন করতে 'h2' উপাদানের সূচকটি নির্দিষ্ট করে।
আউটপুট
আউটপুট দেখায় যে শূন্য সূচকে রাখা 'H2' উপাদানটির পাঠ্যের রঙটি বোতাম ক্লিক করার পরে 'ডেমো' শ্রেণী পরিবর্তিত হয়েছে।
উদাহরণ 3: একই শ্রেণীর উপাদানের সংখ্যা পেতে 'querySelectorAll()' পদ্ধতি প্রয়োগ করা
এই উদাহরণটি 'querySelectorAll()' পদ্ধতি ব্যবহার করে একই শ্রেণীর উপাদানের সংখ্যা পুনরুদ্ধার করে।
HTML কোড
প্রথমে, 'উদাহরণ 1' এর পরিবর্তিত HTML কোডটি দেখুন:
< পি আইডি = 'জন্য' >> পি >
উপরে উল্লিখিত HTML কোডে, 'উদাহরণ 1' HTML কোডের শেষে একটি id 'para' সহ একটি খালি অনুচ্ছেদ যুক্ত করুন৷
জাভাস্ক্রিপ্ট কোড
এখন, জাভাস্ক্রিপ্ট কোড দিয়ে চালিয়ে যান:
< লিপি >ফাংশন jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'জন্য' ) .innerHTML = nodelist.length;
}
লিপি >
উপরের কোড স্নিপেট অনুযায়ী:
- 'jsFunc()' ফাংশনটি প্রথমে '
' ব্যবহার করে সমস্ত উপাদান নির্বাচন করে। querySelectorAll() 'পদ্ধতি।
- এর পরে, ' getElementById() ” পদ্ধতি প্রয়োগকৃত “দৈর্ঘ্য” বৈশিষ্ট্যের প্রত্যাবর্তিত মান সহ এটিকে যুক্ত করতে তার আইডি “প্যারা” এর মাধ্যমে যোগ করা খালি অনুচ্ছেদটি অ্যাক্সেস করে।
আউটপুট
যেমন দেখা যায়, উপরের আউটপুট মোট '4' উপাদান দেখায় যা নির্দিষ্ট CSS ক্লাস সিলেক্টর 'ডেমো' এর সাথে মেলে।
উপসংহার
দ্য ' querySelectorAll() ” পদ্ধতিটি সিএসএস নির্বাচককে এর মান হিসাবে উল্লেখ করে সহজেই ব্যবহার করা যেতে পারে। এই পদ্ধতিটি প্রতিটি HTML উপাদানের সাথে মেলে এবং নির্দিষ্ট নির্বাচকের সাথে মেলে এমনগুলি নির্বাচন করে। উপাদানগুলি নির্বাচন করা হলে, এটি স্ক্রিপ্ট বিভাগে সংজ্ঞায়িত তাদের উপর প্রয়োজনীয় কাজ সম্পাদন করে। এই নির্দেশিকাটি সংক্ষিপ্তভাবে জাভাস্ক্রিপ্টে 'querySelectorAll()' পদ্ধতির ব্যবহার চিত্রিত করেছে।