JavaScript-də element qrupunun alınması

Əvvəlki dərslərdə biz querySelector metodu ilə səhifədən bir element alırdıq. İndi isə element qruplarını almağı və birdən çox element üzərində eyni anda müəyyən əməliyyatları yerinə yetirməyi öyrənməyin vaxtıdır.

Bunun üçün querySelectorAll metodu var. Bu metod, CSS seçicinə uyğun gələn bütün teqləri elementlər massivi şəklində əldə edir. Tapılan elementlərlə bir şey etmək üçün, alınan massivlə işləmək lazımdır, məsələn, onu tsikl ilə döndərmək və tsiklin daxilində hər bir elementlə ayrılıqda müəyyən əməliyyatı yerinə yetirmək.

Məsələn, fərz edək ki, bizdə www sinfi olan abzaslar verilib:

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

Gəlin bu abzasların massivini əldə edək, onları tsikl ilə döndərək və tsiklin daxilində tapılan abzasların mətnlərini konsola çıxaraq:

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

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

İndi isə gəlin hər bir abzasın mətninə nida işarəsi əlavə edək:

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

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

Abzaslar və düymə verilib. Düyməyə klikləndikdə bütün abzasları tapın, onları tsikl ilə döndərin və hər bir abzasın mətnini 'text' dəyərinə təyin edin.

Mətni olan abzaslar və düymə verilib. Düyməyə klikləndikdə hər bir abzasın mətninə onun sıra nömrəsini yazın.

Rəqəmləri olan inputlar, abzas və düymə verilib. Düyməyə klikləndikdə inputlardakı rəqəmlərin cəmini tapın və bu cəmi abzasın mətninə yazın.