Obtención de elementos DOM sin duplicados

Supongamos que tenemos párrafos y un botón:

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

<button>click me</button>

Supongamos que el usuario hace clic en estos párrafos en un orden arbitrario. Hagamos que al presionar el botón, al final de cada párrafo en el que se haya hecho clic, se agregue un signo de exclamación. Resolvamos el problema usando Set.

Empecemos. Primero obtengamos nuestros elementos en variables:

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

Creemos una nueva colección Set:

javascriptlet set = new Set;

Recorramos los párrafos con un ciclo y asignemosles un controlador de eventos para el clic:

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

Ahora, al hacer clic en un párrafo, agreguemos ese párrafo a la colección:

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

Debido a que usamos la colección Set, un clic repetido en un párrafo no conducirá a la adición de un duplicado del párrafo.

Ahora, al hacer clic en el botón, recorramos el contenido de nuestra colección y a cada párrafo agreguemos un signo de exclamación al final:

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