Атрыманне групы элементаў у 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'.

Дадзеныя абзацы з тэкстам і кнопка. Па націску на кнопку запішыце ў канец тэксту кожнага абзаца яго парадкавы нумар.

Дадзеныя інпуты з лікамі, абзац і кнопка. Па націску на кнопку знайдзіце суму лікаў з інпутаў і запішыце гэтую суму ў тэкст абзаца.