Атрыманне 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 + '!';
  }
});