DOM ელემენტების მიღება დუბლიკატების გარეშე

დავუშვათ, გვაქვს პარაგრაფები და ღილაკი:

<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>

<button>click me</button>

დავუშვათ მომხმარებელი აწკაპუნებს ამ პარაგრაფებზე თვითნებური თანმიმდევრობით. მოდით, გავაკეთოთ ისე, რომ ღილაკზე დაჭერისას ყოველი პარაგრაფის ბოლოს, რომელზეც მოხდა დაწკაპუნება, დაემატოს ძახილის ნიშანი. მოვაგვაროთ ამოცანა Set-ის მეშვეობით.

დავიწყოთ. პირველ რიგში, მივიღოთ ჩვენი ელემენტები ცვლადებში:

let button = document.querySelector('button');
let elems  = document.querySelectorAll('p');

შევქმნათ ახალი კოლექცია Set:

let set = new Set;

ციკლით გადავუყვეთ პარაგრაფებს და დავამატოთ მათზე დაწკაპუნების დამმუშავებელი:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		
	});
}

მოდით ახლა პარაგრაფზე დაწკაპუნებისას დავამატოთ ეს პარაგრაფი კოლექციაში:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		set.add(this);
	});
}

იმის გამო, რომ ჩვენ ვიყენებთ კოლექციას Set, პარაგრაფზე განმეორებითი დაწკაპუნება არ გამოიწვევს პარაგრაფის დუბლიკატის დამატებას.

მოდით ახლა ღილაკზე დაჭერისას გადავუყვეთ ჩვენი კოლექციის შიგთავსს და ყოველ პარაგრაფს დავამატოთ ძახილის ნიშანი:

button.addEventListener('click', function() {
	for (let elem of set) {
		elem.textContent = elem.textContent + '!';
	}
});

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