JavaScript-da elementlar guruhini olish

Oldingi darslarda biz querySelector usuli yordamida bitta sahifa elementini olgan edik. Endi esa elementlar guruhini olishni va bir nechta elementlar bilan biror amallarni bajarishni o‘rganish vaqti keldi.

Buning uchun querySelectorAll usuli mavjud bo‘lib, u CSS selektoriga mos keladigan barcha teglarni elementlar massivi ko‘rinishida oladi. Topilgan elementlar bilan biror narsa qilish uchun olingan massiv bilan ishlash kerak, masalan, uni tsikl yordamida aylantirish va tsikl davomida har bir element bilan alohida amal bajarish.

Faraz qilaylik, masalan, bizda www klassiga ega bo‘lgan abzatslar berilgan:

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

Keling, ushbu abzatslarning massivini olamiz, ularni tsikl yordamida aylantiramiz va tsikl davomida topilgan abzatslarning matnlarini konsolga chiqaramiz:

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

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

Endi esa keling, har bir abzats matnining oxiriga undov belgisini qo‘shamiz:

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

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

Abzatslar va tugma berilgan. Tugma bosilganda barcha abzatslarni toping, ularni tsikl yordamida aylantiring va har bir abzatsning matnini 'text' qiymatiga o‘rnating.

Matnli abzatslar va tugma berilgan. Tugma bosilganda har bir abzats matnining oxiriga uning tartib raqamini yozing.

Raqamli inputlar, abzats va tugma berilgan. Tugma bosilganda inputlardagi raqamlar yig‘indisini toping va shu yig‘indini abzats matniga yozing.