Ottenere elementi DOM senza duplicati

Supponiamo di avere dei paragrafi e un pulsante:

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

<button>click me</button>

L'utente fa clic su questi paragrafi in un ordine arbitrario. Facciamo in modo che alla pressione del pulsante, alla fine di ogni paragrafo su cui è stato fatto clic, venga aggiunto un punto esclamativo. Risolviamo il problema tramite Set.

Iniziamo. Per prima cosa otteniamo i nostri elementi in variabili:

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

Creiamo una nuova collezione Set:

javascriptlet set = new Set;

Iteriamo i paragrafi con un ciclo e aggiungiamo loro un gestore di click:

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

Ora, al click su un paragrafo, aggiungiamo quel paragrafo alla collezione:

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

Grazie all'uso della collezione Set, un click ripetuto su un paragrafo non porterà all'aggiunta di un duplicato del paragrafo.

Ora, al click sul pulsante, iteriamo il contenuto della nostra collezione e ad ogni paragrafo aggiungiamo un punto esclamativo alla fine:

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