В предыдущих уроках мы вами с помощью метода 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.
Даны абзацы с текстом и кнопка. По нажатию на кнопку запишите в конец текста каждого абзаца его порядковый номер.
Даны инпуты с числами, абзац и кнопка. По нажатию на кнопку найдите сумму чисел из инпутов и запишите эту сумму в текст абзаца.