বিভিন্ন পরিস্থিতিতে, প্রোগ্রামারদের নাম বৈশিষ্ট্য দ্বারা HTML উপাদান পেতে হবে। ধরুন ডেভেলপার একটি ফর্ম কন্ট্রোল অ্যাক্সেস করতে চায়, যেমন একটি রেডিও বোতাম বা চেকবক্স, এর মান পড়তে বা ম্যানিপুলেট করার জন্য। আরো সুনির্দিষ্টভাবে, ' নাম ” বৈশিষ্ট্য গ্রুপ সম্পর্কিত ফর্ম নিয়ন্ত্রণে ব্যবহৃত হয় এবং একই নাম অনেকগুলি নিয়ন্ত্রণে প্রদান করা যেতে পারে, তাদের একটি একক গ্রুপ হিসাবে অ্যাক্সেস করার অনুমতি দেয়।
এই পোস্টটি জাভাস্ক্রিপ্টে নাম অনুসারে একটি HTML উপাদান পুনরুদ্ধার করার পদ্ধতিগুলি ব্যাখ্যা করবে।
জাভাস্ক্রিপ্টে নাম অনুসারে উপাদানগুলি কীভাবে পাবেন?
জাভাস্ক্রিপ্টে, আপনি নিম্নলিখিত পূর্বনির্ধারিত জাভাস্ক্রিপ্ট পদ্ধতিগুলির সাহায্যে একটি এইচটিএমএল উপাদানের নাম বৈশিষ্ট্য ব্যবহার করে অ্যাক্সেস করতে পারেন:
-
- getElementsByName() পদ্ধতি
- querySelectorAll() পদ্ধতি
পদ্ধতি 1: 'getElementsByName()' পদ্ধতি ব্যবহার করে নাম অনুসারে উপাদান পান
নামের দ্বারা HTML উপাদান পেতে, ব্যবহার করুন “ GetElementsByName() 'পদ্ধতি। এই পদ্ধতিটি নির্দিষ্ট নামের বৈশিষ্ট্যযুক্ত উপাদানগুলির একটি সংগ্রহ দেয়।
বাক্য গঠন
getElementsByName() পদ্ধতির জন্য নিম্নলিখিত সিনট্যাক্স ব্যবহার করা হয়:
document.getElementsByName ( 'নাম' )
উদাহরণ
প্রথমত, ছয়টি বোতাম তৈরি করুন। তাদের মধ্যে পাঁচজনের একটি ' নাম 'অ্যাট্রিবিউট যা HTML এলিমেন্ট পেতে ব্যবহৃত হয়' বোতাম ” অনক্লিক ইভেন্টটি ষষ্ঠ বোতামের সাথে সংযুক্ত করুন যা 'কে কল করবে প্রয়োগ শৈলী() পাঁচটি বোতামকে স্টাইল করার জন্য ফাংশন:
< বোতাম নাম = 'বিটিএন' > বোতাম বোতাম >< বোতাম নাম = 'বিটিএন' > বোতাম বোতাম >
< বোতাম নাম = 'বিটিএন' > বোতাম বোতাম >
< বোতাম নাম = 'বিটিএন' > বোতাম বোতাম >
< বোতাম নাম = 'বিটিএন' > বোতাম বোতাম > < br < br >
< বাটন অনক্লিক = 'প্রয়োগশৈলী()' > এখানে ক্লিক করুন বোতাম >
একটি ফাংশন সংজ্ঞায়িত করুন ' প্রয়োগ শৈলী() ” যা বোতাম ক্লিকে ট্রিগার করবে এবং সমস্ত বোতামের পটভূমির রঙ পরিবর্তন করবে। এটি করার জন্য, প্রথমে সমস্ত ' বোতাম 'একটি গ্রুপ হিসাবে উপাদানগুলি 'কে কল করে GetElementsByName() 'পদ্ধতি:
const btns = document.getElementsByName ( 'বিটিএন' ) ;
btns.forEach ( btn = > {
btn.style.background = 'ক্যাডেটব্লু' ;
} ) ;
}
বোতামটিতে ক্লিক করার সময় আপনি আউটপুটে দেখতে পাচ্ছেন যে পাঁচটি বোতামের পটভূমির রঙ পরিবর্তন হবে:
পদ্ধতি 2: 'querySelectorAll()' পদ্ধতি ব্যবহার করে নামের এলিমেন্ট পান
এছাড়াও আপনি ব্যবহার করতে পারেন ' querySelectorAll() '' ব্যবহার করে উপাদান পাওয়ার পদ্ধতি নাম ' জাভাস্ক্রিপ্টে বৈশিষ্ট্য। এই পদ্ধতিটি একটি নথিতে সমস্ত উপাদান পুনরুদ্ধার করতে ব্যবহৃত হয় যা একটি নির্দিষ্ট নির্বাচক/অ্যাট্রিবিউট যেমন CSS ক্লাস, আইডি বা নামের সাথে মেলে।
বাক্য গঠন
প্রদত্ত সিনট্যাক্সটি ' ব্যবহার করে নাম দ্বারা উপাদান পাওয়ার জন্য ব্যবহার করা হয় querySelectorAll()” পদ্ধতি:
document.querySelectorAll ( '[]' ) ;
উদাহরণ
নিম্নলিখিত উদাহরণে, আমরা শুধুমাত্র সেই বোতামগুলির রঙ পরিবর্তন করব যার নাম ' btn1 ”:
< div >< বোতামের নাম = 'বিটিএন' > বোতাম বোতাম >
< বোতামের নাম = 'btn1' > বোতাম বোতাম >
< বোতামের নাম = 'বিটিএন' > বোতাম বোতাম >
< বোতামের নাম = 'btn1' > বোতাম বোতাম >
< বোতামের নাম = 'বিটিএন' > বোতাম বোতাম > < br < br >
< বাটন অনক্লিক = 'প্রয়োগশৈলী()' > এখানে ক্লিক করুন বোতাম >
div >
সংজ্ঞায়িত ফাংশনে, আমরা প্রথমে সমস্ত বোতাম উপাদানগুলির অ্যাক্সেস কল করব যার নাম ' btn1 এবং তারপরে এটিতে স্টাইলিং প্রয়োগ করুন:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'ক্যাডেটব্লু' ;
} ) ;
}
প্রদত্ত আউটপুটটি বোঝায় যে শুধুমাত্র দুটি বোতাম তাদের পটভূমির রঙ পরিবর্তন করেছে যার নাম 'btn1':
বিঃদ্রঃ: আপনি যদি একটি একক উপাদান পেতে চান, তাহলে document.querySelectorAll-এর পরিবর্তে document.querySelector ব্যবহার করার পরামর্শ দেওয়া হয়।
উপসংহার
নামের দ্বারা একটি উপাদান পেতে বা পুনরুদ্ধার করার জন্য, ' GetElementsByName() ' অথবা ' querySelectorAll() 'পদ্ধতি। নাম অনুসারে উপাদান পাওয়ার জন্য সবচেয়ে সাধারণ এবং কার্যকরীভাবে ব্যবহৃত পদ্ধতি হল 'getElementsByName()' পদ্ধতি। এই পোস্টটি জাভাস্ক্রিপ্টে নাম অনুসারে একটি HTML উপাদান পুনরুদ্ধার করার পদ্ধতিগুলি চিত্রিত করেছে৷