জাভাস্ক্রিপ্টে এলিমেন্টের গ্রুপ পাওয়া

পূর্ববর্তী পাঠগুলোতে আমরা querySelector মেথড ব্যবহার করে পৃষ্ঠার একটি মাত্র এলিমেন্ট পেয়েছি। এখন এলিমেন্টের গ্রুপ পাওয়া এবং একসাথে অনেকগুলি এলিমেন্টের সাথে কিছু অপারেশন করা শেখার সময় এসেছে।

এর জন্য রয়েছে querySelectorAll মেথড, যা CSS সিলেক্টরের অধীনে আসা সমস্ত ট্যাগ এলিমেন্টের অ্যারে আকারে পায়। পাওয়া এলিমেন্টগুলির সাথে কিছু করতে, প্রাপ্ত অ্যারের সাথে কাজ করতে হবে, উদাহরণস্বরূপ, এটিকে একটি লুপ দিয়ে ঘুরানো এবং লুপের মধ্যে প্রতিটি এলিমেন্টের সাথে আলাদাভাবে কিছু অপারেশন সম্পাদন করা।

ধরা যাক, উদাহরণস্বরূপ, আমাদের কাছে www ক্লাস সহ অনুচ্ছেদ দেওয়া আছে:

<p class="www">text1</p>
<p class="www">text2</p>
<p class="www">text3</p>

আসুন এই অনুচ্ছেদগুলির অ্যারে পাই, এগুলিকে লুপ দিয়ে ঘুরাই এবং লুপে পাওয়া অনুচ্ছেদগুলির টেক্সট কনসোলে আউটপুট করি:

let elems = document.querySelectorAll('.www');

for (let elem of elems) {
	console.log(elem.textContent);
}

এবং এখন আসুন প্রতিটি অনুচ্ছেদের টেক্সটের শেষে একটি বিস্ময়বোধক চিহ্ন যোগ করি:

let elems = document.querySelectorAll('.www');

for (let elem of elems) {
	elem.textContent = elem.textContent + '!';
}

অনুচ্ছেদ এবং একটি বাটন দেওয়া আছে। বাটনে ক্লিক করলে সমস্ত অনুচ্ছেদ খুঁজুন, লুপ দিয়ে সেগুলি ঘুরিয়ে দেখুন এবং প্রতিটি অনুচ্ছেদের টেক্সট মান 'text' এ সেট করুন।

টেক্সট সহ অনুচ্ছেদ এবং একটি বাটন দেওয়া আছে। ক্লিকে বাটনের প্রতিটি অনুচ্ছেদের টেক্সটের শেষে তার ক্রমিক নম্বর লিখুন।

সংখ্যা সহ ইনপুট, একটি অনুচ্ছেদ এবং একটি বাটন দেওয়া আছে। বাটনে ক্লিক করলে ইনপুট থেকে সংখ্যার যোগফল খুঁজুন এবং সেই যোগফল অনুচ্ছেদের টেক্সটে লিখুন।