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 + '!';
	}
});

Абзацлар ва тугма берилган. Фойдаланувчи ушбу абзацларга ихтиёрий тартибда босинтиради. Тугма босилганда, босилган ҳар бир абзацнинг охирига унглатиш белгиси қўшиладиган қилинг.

г.