Атрыманне групы элементаў у JavaScript

У папярэдніх уроках мы з дапамогай метаду querySelector атрымлівалі адзін элемент старонкі. Цяпер прыйшоў час навучыцца атрымліваць групу элементаў і прадзяляць якія-небудзь аперацыі адразу з многімі элементамі.

Для гэтага існуе метад querySelectorAll, які атрымлівае ўсе тэгі, што падпадаюць пад CSS селектар, у выглядзе масіва элементаў. Каб зрабіць што-небудзь з знойдзенымі элементамі, трэба папрацаваць з атрыманым масівам, напрыклад, перабраць яго цыклам і ў цыкле выканаць якую-небудзь аперацыю з кожным элементам па асобнасці.

Хай, напрыклад, у нас дадзеныя абзацы з класам www:

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

Давайце атрымаем масіў гэтых абзацаў, перабярэм іх цыклам і ў цыкле вывядзем тэксты знойдзеных абзацаў у кансоль:

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

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

А цяпер давайце ў канец тэксту кожнага абзаца дадамо клічнік:

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

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