DOM элементларини дубликатсиз олиш

Фарз қилайлик, бизда абзацлар ва тугма мавжуд:

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

<button>click me</button>

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

Бошлаймиз. Аввало элементларимизни ўзгарувчиларга оламиз:

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

Янги Set коллекиясини яратамиз:

javascriptlet set = new Set;

Абзацларни цикл орқали айлантириб, уларга босинтириш учун ишловчини ўрнатамиз:

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

Энди абзацга босилганда, ушбу абзацни коллекияга қўшайлик:

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

Биз Set коллекиясидан фойдаланганимиз сабабли, абзацга такрор босилганда унга дубликат қўшилмайди.

Энди тугмага босилганда бизнинг коллекиямизнинг ичидиги маълумотларни айлантириб, ҳар бир абзацнинг охирига унглатиш белгиси қўшайлик:

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