HTML DOM getElementsByTagName() মেথড ডকুমেন্টে প্রদত্ত ট্যাগ নাম ունեցা সকল এলিমেন্টের কালেকশন পাওয়ার জন্য ব্যবহৃত হয়। এটি সমস্ত প্রদত্ত এলিমেন্টকে NodeList অবজেক্ট হিসেবে রিটার্ন করে। রিটার্ন করা অবজেক্টে ইন্ডেক্স নম্বর ব্যবহার করে যেকোনো এলিমেন্ট অ্যাক্সেস করা যায়।
HTMLCollection রিটার্ন হওয়া অবজেক্ট DOM ট্রির সাথে সিঙ্ক থাকে, তাই এলিমেন্ট যোগ বা বাদ দেওয়ার পর বারবার getElementsByTagName() মেথড কল করার প্রয়োজন নেই।
সিনট্যাক্স
getElementsByTagName() মেথডের সিনট্যাক্স:
element.getElementsByTagName(tagname)
এখানে, tagname হলো একটি বাধ্যতামূলক প্যারামিটার যা সন্তান এলিমেন্টের ট্যাগনাম নির্দেশ করে যা আমরা পেতে চাই।
উদাহরণ
getElementsByTagName() মেথডের উদাহরণ:
<!DOCTYPE html> <html> <head> <script> function changePara() { var p = document.getElementsByTagName("P"); p[0].innerHTML = "This text has been changed"; p[1].style.color = "red"; p[1].style.backgroundColor = "yellow"; } </script> </head> <body> <h1>getElementsByTagName() উদাহরণ</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p> <button onclick="changePara()">CHANGE</button> </body> </html>আউটপুট
এটি নিচের আউটপুট তৈরি করবে:
CHANGE বাটনে ক্লিক করলে:
উপরের উদাহরণে:
আমরা দুটি প্যারাগ্রাফ তৈরি করেছি যাদের কোনো অ্যাট্রিবিউট নেই:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
তারপর CHANGE বাটন তৈরি করা হয়েছে যা ইউজার ক্লিক করলে changePara() এক্সিকিউট করবে:
<button onclick="changePara()">CHANGE</button>
changePara() মেথড getElementsByTagName() মেথড ডকুমেন্ট অবজেক্টের ওপর কল করে দুটি <p> এলিমেন্ট NodeList অবজেক্ট হিসেবে পাওয়া এবং p ভেরিয়েবলে অ্যাসাইন করা। ইন্ডেক্স নম্বর ব্যবহার করে প্রথম প্যারাগ্রাফের টেক্সট পরিবর্তন করা এবং দ্বিতীয় প্যারাগ্রাফে কিছু স্টাইলিং প্রয়োগ করা:
function changePara() { var p = document.getElementsByClassName("PARA1"); p[0].innerHTML = "This text has been changed"; p[1].style.color = "red"; p[1].style.backgroundColor = "yellow"; } 