Получение группы элементов в 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 + '!';
}