Получение группы элементов

В предыдущих уроках мы вами с помощью метода 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.innerHTML);
}

А теперь давайте в конец текста каждого абзаца добавим восклицательный знак:

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

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

Даны абзацы и кнопка. По нажатию на кнопку найдите все абзацы, переберите из циклом и установите текст каждого абзаца в значение 'text'.

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

Даны инпуты с числами, абзац и кнопка. По нажатию на кнопку найдите сумму чисел из инпутов и запишите эту сумму в текст абзаца.