HTML DOM getElementsByClassName() পদ্ধতিটি একটি প্রদত্ত শ্রেণীর নাম সহ নথিতে সমস্ত উপাদানের সংগ্রহ পাওয়ার জন্য ব্যবহৃত হয়। এটি একটি NodeList অবজেক্ট হিসাবে প্রদত্ত সমস্ত উপাদান ফেরত দেয়। আপনি সূচী নম্বর ব্যবহার করে প্রত্যাবর্তিত বস্তুর যেকোনো উপাদান অ্যাক্সেস করতে পারেন। এই পদ্ধতিটি যেকোন পৃথক উপাদানকে বলা যেতে পারে যাতে তার বংশধর শিশু উপাদানগুলির প্রদত্ত শ্রেণীর নাম থাকে৷
সিনট্যাক্স
getElementsByClassName() পদ্ধতির জন্য সিনট্যাক্স নিচে দেওয়া হল −
document.getElementsByClassName(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() example</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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
চেঞ্জ বোতামে ক্লিক করলে -
উপরের উদাহরণে -
আমরা দুটি অনুচ্ছেদ তৈরি করেছি যেগুলির সাথে 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() পদ্ধতি ব্যবহার করে nodeListObject হিসাবে
উপাদান উভয়ই পায় এবং ভেরিয়েবল 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";
} 