LWC - প্রশ্ন নির্বাচক ()

প্রশ্ন নির্বাচক()

মূলত, querySelector() 'this.template' এর সাথে ব্যবহার করা হয় যা একটি নির্দিষ্ট টেমপ্লেটে উপস্থিত উপাদানগুলিকে নিয়ে আসে। একাধিক উপাদান থাকলে, এটি শুধুমাত্র প্রথম উপাদান বিবেচনা করবে। নির্দিষ্ট উপাদান টেমপ্লেটে বিদ্যমান না থাকলে নাল ফেরত দেওয়া হয়। এটি নির্বাচককে একটি পরামিতি হিসাবে নেয়। এটি ক্লাসের নাম ট্যাগ হতে পারে। আইডি সমর্থন করা হবে না। কিছু ক্ষেত্রে, আপনার একই ক্লাস আছে কিন্তু মান ভিন্ন। এই পরিস্থিতিতে, আমাদের ডেটা-রিসিড ব্যবহার করতে হবে যা মানের উপর ভিত্তি করে উপাদানগুলি পায়।

বাক্য গঠন:

আসুন দেখি কিভাবে querySelector() এর ভিতরে নির্বাচককে নির্দিষ্ট করতে হয়।

1. this.template.querySelector(নির্বাচক)
2. this.template.querySelector('[data-recid='value']')

উদাহরণস্বরূপ: যদি নির্বাচকটি h1 ট্যাগ হয়, তাহলে আপনার এটিকে 'h1' হিসাবে উল্লেখ করা উচিত।

1. সমস্ত উদাহরণ এই 'meta.xml' ফাইলটি ব্যবহার করে। আমরা প্রতিটি উদাহরণে এটি নির্দিষ্ট করব না। LWC উপাদানগুলি আপনার রেকর্ড পৃষ্ঠা, অ্যাপ পৃষ্ঠা বা হোম পেজে যোগ করা যেতে পারে।

2. এই নির্দেশিকায় আমরা যে সমস্ত উদাহরণ নিয়ে আলোচনা করতে যাচ্ছি, লজিককে 'js' কোড হিসেবে দেওয়া হয়েছে। এর পরে, আমরা স্ক্রিনশটটি নির্দিষ্ট করি যাতে পুরো 'js' কোডটি অন্তর্ভুক্ত থাকে।

উদাহরণ 1:

প্রথমে, আমরা এইচটিএমএল ফাইলে কিছু টেক্সট সহ h1, div, স্প্যান এবং লাইটনিং-বাটন ট্যাগ তৈরি করি। এছাড়াও, আমরা একটি বোতাম তৈরি করি যা ক্লিক করা হলে পূর্ববর্তী উপাদানগুলি পায়। 'js' ফাইলে, আমরা this.template.querySelector() এর মাধ্যমে এই চারটি উপাদানের ভিতরের পাঠ্য ফেরত দিই।

firstExample.html

firstExample.js

সম্পূর্ণ কোড:

আউটপুট:

যেকোনো বস্তুর 'রেকর্ড' পৃষ্ঠায় এই উপাদানটি যোগ করুন (আমরা এটি অ্যাকাউন্ট রেকর্ড পৃষ্ঠায় যুক্ত করেছি)। এই উইন্ডোটি পরিদর্শন করুন এবং 'কনসোল' ট্যাবে যান।

এখন, 'বিশদ বিবরণ পান' বোতামে ক্লিক করুন। এর পরে, আপনি দেখতে পাবেন যে সমস্ত উপাদানগুলির জন্য কনসোলে অভ্যন্তরীণ পাঠ্য প্রদর্শিত হয়েছে।

উদাহরণ 2:

উদাহরণ 1-এ আলোচিত উপাদানটি ব্যবহার করুন। HTML কম্পোনেন্টে 'h1' ট্যাগ সহ দুটি উপাদান নির্দিষ্ট করুন এবং 'h1' এর অভ্যন্তরীণ পাঠ্য পেতে 'js' ফাইলে querySelector() ব্যবহার করুন।

firstExample.html

firstExample.js

সম্পূর্ণ কোড:

আউটপুট:

একই ট্যাগ সহ দুটি উপাদান আছে। সুতরাং, querySelector() শুধুমাত্র প্রথম উপাদান নির্বাচন করে। আপনি যখন 'বিশদ বিবরণ পান' বোতামে ক্লিক করবেন, আপনি প্রথম 'h1' দেখতে পাবেন এবং ভিতরের লেখাটি কনসোলে ফিরে আসবে।

উদাহরণ 3:

আমরা একটি ভেরিয়েবলে querySelector() সংরক্ষণ করতে পারি এবং innerText পেতে এই ভেরিয়েবলটি ব্যবহার করতে পারি। আসুন কিছু টেক্সট সহ একটি স্প্যান ট্যাগ তৈরি করি এবং এটিকে একটি ভেরিয়েবলে সংরক্ষণ করে কনসোলে অভ্যন্তরীণ পাঠ্যটি ফেরত দেই।

firstExample.html

firstExample.js

সম্পূর্ণ কোড:

আউটপুট:

উদাহরণ 4:

এই উদাহরণে, আমরা একটি বোতাম এবং ইনপুট পাঠ্য (লাইটনিং-ইনপুট) তৈরি করি যা বিষয়টিকে স্ট্রিং হিসাবে গ্রহণ করবে। আমরা querySelector() পদ্ধতিতে নির্বাচক হিসাবে 'লাইটনিং-ইনপুট' পাস করি। এটি 'computer_related' ভেরিয়েবলের সাথে বরাদ্দ করা হয়েছে। এই বোতামের অন ক্লিকে, এই ভেরিয়েবলে উপস্থিত মানটি প্রদর্শিত হবে।

secondExample.html

secondExample.js

সম্পূর্ণ কোড:

আউটপুট:

উদাহরণ 5:

এখানে, আমরা ডেটা-রিসিড ব্যবহার করি। HTML ফাইলে 'Span1', 'Span2', এবং 'Span3' হিসাবে রেসিড সহ তিনটি স্প্যান ট্যাগ সহ একটি বোতাম তৈরি করি। querySelector() এ ডেটা-রিসিডে 'Span1' পাস করে প্রথম স্প্যানটি নির্বাচন করুন।

thirdExample.html

thirdExample.js

সম্পূর্ণ কোড:

আউটপুট:

উপসংহার

আমরা শিখেছি কিভাবে DOM উপাদান অ্যাক্সেস করতে querySelector() ব্যবহার করতে হয়। querySelector() বর্তমান টেমপ্লেটের উপাদান নির্বাচন করতে 'this.template' ব্যবহার করেছে। এটি একটি ভেরিয়েবলে সংরক্ষণ করা বা সরাসরি ব্যবহার করা সম্ভব হতে পারে। এ দুটোই উদাহরণসহ উল্লেখ করা হলো। এছাড়াও, আমরা একটি উদাহরণ প্রদান করেছি যাতে একাধিক উপাদান রয়েছে। এই ক্ষেত্রে, querySelector() প্রথম উপাদান প্রদান করে।