Добивање на група елементи во 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'.

Дадени се параграфи со текст и копче. При кликнување на копчето запишете на крајот од текстот на секој параграф неговиот редоследен број.

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