জাভাস্ক্রিপ্ট এ getElementsByName মেথড ব্যবহার করে HTML ডকুমেন্টের মধ্যে নির্দিষ্ট name অ্যাট্রিবিউট সম্বলিত উপাদানগুলি সংগ্রহ করা যায়। এটি বিশেষ করে ফর্ম উপাদানগুলির সাথে কাজ করার সময় খুবই কার্যকর। এই টিউটোরিয়ালে, আমরা getElementsByName মেথডের কাজ, ব্যবহার এবং উদাহরণ সম্পর্কে বিস্তারিত আলোচনা করব।
getElementsByName একটি DOM (Document Object Model) মেথড যা নির্দিষ্ট নামের অ্যাট্রিবিউট সহ সমস্ত উপাদান নির্বাচন করতে ব্যবহৃত হয়। এই মেথডটি একটি NodeList রিটার্ন করে যা ঐ নামের সব উপাদানের তালিকা ধারণ করে।
নিচে getElementsByName এর সিনট্যাক্স দেকুন।
var elements = document.getElementsByName(name);
name: এটি ঐ name অ্যাট্রিবিউটের মান যা আপনি খুঁজছেন। এটি একটি লাইভ NodeList রিটার্ন করে যা HTML ডকুমেন্টে যে সমস্ত উপাদানগুলি ঐ নামের অ্যাট্রিবিউট ধারণ করে, তাদের ধারণ করে।
এখন আমরা একটি HTML ডকুমেন্ট তৈরি করব যেখানে বিভিন্ন ধরনের উপাদান রয়েছে, এবং তারপর JavaScript ব্যবহার করে তাদের নির্বাচন করব getElementsByName মেথড দিয়ে।
ফর্ম উপাদান নির্বাচন
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>getElementsByName Example</title> </head> <body> <form id="myForm"> <label for="firstName">First Name:</label> <input type="text" id="firstName" name="userName" value="John"> <br> <label for="lastName">Last Name:</label> <input type="text" id="lastName" name="userName" value="Doe"> <br> <input type="submit" value="Submit"> </form> <script> // JavaScript code var elements = document.getElementsByName('userName'); for (var i = 0; i < elements.length; i++) { console.log(elements[i].value); // Output: John, Doe } </body> </html>
এই উদাহরণে, ফর্মের দুটি ইনপুট ফিল্ড রয়েছে যা name="userName" অ্যাট্রিবিউট ধারণ করে। JavaScript-এ getElementsByName('userName') মেথড ব্যবহার করে আমরা এই ইনপুট ফিল্ডগুলির তালিকা পাই এবং তাদের মান কনসোলে লগ করি।
একাধিক উপাদান নির্বাচন
নিচের উদাওরনে আমরা একাধিক উপাদান নির্বাচন করব।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>getElementsByName Multiple Example</title> </head> <body> <form id="myForm"> <input type="checkbox" name="interest" value="Sports"> Sports <input type="checkbox" name="interest" value="Music"> Music <input type="checkbox" name="interest" value="Travel"> Travel <br> <input type="submit" value="Submit"> </form> <script> // JavaScript code var checkboxes = document.getElementsByName('interest'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].checked) { console.log(checkboxes[i].value); // Output checked values } } </script> </body> </html>
এই উদাহরণে, ফর্মে একাধিক চেকবক্স রয়েছে যা name="interest" অ্যাট্রিবিউট ধারণ করে। JavaScript ব্যবহার করে আমরা এই চেকবক্সগুলির তালিকা সংগ্রহ করি এবং শুধু চেক করা চেকবক্সগুলির মান কনসোলে লগ করি।
p class="pcommon">নাম সহ HTML উপাদান নির্বাচননিচের উদাওরনে আমরা নাম সহ অন্যান্য HTML উপাদান নির্বাচন করব।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>getElementsByName Non-form Example</title> </head> <body> <div name="section">Section 1</div> <div name="section">Section 2</div> <div name="section">Section 3</div> <script> // JavaScript code var sections = document.getElementsByName('section'); for (var i = 0; i < sections.length; i++) { console.log(sections[i].innerText); // Output: Section 1, Section 2, Section 3 } </script> </body> </html>
এই উদাহরণে, তিনটি div উপাদান রয়েছে যেগুলির name অ্যাট্রিবিউট section। JavaScript ব্যবহার করে আমরা এই div উপাদানগুলির তালিকা পাই এবং তাদের ভিতরের টেক্সট কনসোলে লগ করি।
নিচে getElementsByName এর বিপরীতে অন্যান্য পদ্ধতি গুলো দেকুন।
getElementsByName মেথড একটি সহজ ও কার্যকর পদ্ধতি HTML ডকুমেন্টে নির্দিষ্ট name অ্যাট্রিবিউট সহ উপাদানগুলি নির্বাচন করার জন্য। এটি ফর্ম উপাদানগুলির সাথে কাজ করার সময় বিশেষভাবে উপকারী। উদাহরণসহ এই টিউটোরিয়ালটি আশা করি আপনাকে getElementsByName মেথডের ব্যবহার সম্পর্কে পরিষ্কার ধারণা দিয়েছে।
শেয়ার করুন
