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

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

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

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