HTML DOM getElementsByClassName() মেথড

HTML DOM getElementsByClassName() মেথড ডকুমেন্টে প্রদত্ত ক্লাস নাম ունեցা সকল এলিমেন্টের কালেকশন পাওয়ার জন্য ব্যবহৃত হয়। এটি সমস্ত প্রদত্ত এলিমেন্টকে NodeList অবজেক্ট হিসেবে রিটার্ন করে। রিটার্ন করা অবজেক্টে ইন্ডেক্স নম্বর ব্যবহার করে যেকোনো এলিমেন্ট অ্যাক্সেস করা যায়। এই মেথড যেকোনো একটি এলিমেন্টের ওপর কল করা যায় যাতে তার ডেসেন্ডেন্ট চাইল্ড এলিমেন্টগুলোতে প্রদত্ত ক্লাস নাম খুঁজে বের করা যায়।

সিনট্যাক্স

getElementsByClassName() মেথডের সিনট্যাক্স:

document.getElementsByClassName(classname)

এখানে, classname হলো স্ট্রিং টাইপের যা এলিমেন্টের ক্লাস নাম নির্দেশ করে যা আপনি অ্যাক্সেস করতে চান। একাধিক ক্লাস নামও স্পেস দিয়ে পৃথক করে সার্চ করা যায়।

উদাহরণ

getElementsByClassName() মেথডের উদাহরণ:

<!DOCTYPE html> <html> <head> <script>    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";    } </script> </head> <body> <h1>getElementsByClassName() উদাহরণ</h1> <p class="PARA1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> <p class="PARA1"> 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 বাটনে ক্লিক করলে:

উপরের উদাহরণে:

আমরা দুটি প্যারাগ্রাফ তৈরি করেছি যাদের classname=”PARA1” জড়িত:

<p class="PARA1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> <p class="PARA1"> 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() মেথড getElementsByClassName() মেথড ডকুমেন্ট অবজেক্টের ওপর কল করে দুটি <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"; }