Получаване на група елементи в JavaScript

В предишните уроци ние с помощта на метода 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.textContent);
}

А сега нека в края на текста на всеки параграф добавим удивителен знак:

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

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

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

Дадени са параграфи с текст и бутон. При натискане на бутона запишете в края на текста на всеки параграф неговия пореден номер.

Дадени са полета за въвеждане с числа, параграф и бутон. При натискане на бутона намерете сумата от числата от полетата за въвеждане и запишете тази сума в текста на параграфа.