Гирифтани унсурҳои 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 + '!';
	}
});

Абзасҳо ва тугма дода шудаанд. Корбар бар ин абзасҳо дар тартиби ихтиёрӣ клик мекунад. Чунон созед, ки пас аз фишор додан ба тугма ба охири ҳар як абзас, ки рӯи он клик анҷом шудааст, аломати восклицания илова шавад.