Получаване на 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 + '!';
  }
});