Obținerea elementelor DOM fără duplicate

Să presupunem că avem paragrafe și un buton:

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

<button>click me</button>

Să presupunem că utilizatorul face clic pe aceste paragrafe într-o ordine arbitrară. Să facem astfel, încât la apăsarea butonului la sfârșitul fiecărui paragraf pe care s-a făcut clic, să fie adăugat un semn de exclamare. Să rezolvăm problema prin Set.

Să începem. Pentru început, să obținem elementele noastre în variabile:

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

Să creăm o nouă colecție Set:

javascriptlet set = new Set;

Să parcurgem paragrafele cu un ciclu și să atașăm pe ele un handler de clic:

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

Să facem acum ca la clic pe paragraf să adăugăm acest paragraf în colecție:

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

Datorită faptului că folosim colecția Set, un clic repetat pe paragraf nu va duce la adăugarea unui duplicat al paragrafului.

Să facem acum ca la clic pe buton să parcurgem conținutul colecției noastre și fiecărui paragraf la sfârșit să adăugăm un semn de exclamare:

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