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