ელემენტების ჯგუფის მიღება 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'.

მოცემულია აბზაცები ტექსტით და ღილაკი. ღილაკზე დაჭერისას ჩაწერეთ თითოეული აბზაცის ტექსტის ბოლოს მისი რიგითი ნომერი.

მოცემულია ინფუთები რიცხვებით, აბზაცი და ღილაკი. ღილაკზე დაჭერისას იპოვეთ რიცხვების ჯამი ინფუთებიდან და ჩაწერეთ ეს ჯამი აბზაცის ტექსტში.