Добијање групе елемената у JavaScript-у

У претходним лекцијама смо помоћу методе 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'.

Дати су параграфи са текстом и дугме. При клику на дугме запишите на крај текста сваког параграфа његов редни број.

Дати су инпути са бројевима, параграф и дугме. При клику на дугме пронађите збир бројева из инпута и запишите тај збир у текст параграфа.