Dobijanje DOM elemenata bez duplikata

Neka imamo paragrafe i dugme:

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

<button>click me</button>

Neka korisnik klikne na ove paragrafe proizvoljnim redosledom. Hajde da napravimo tako da na klik dugmeta na kraj svakog paragrafa, na koji je izvršen klik, bude dodat uzvičnik. Rešimo zadatak preko Set.

Počnimo. Za početak, dobijmo naše elemente u promenljive:

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

Napravimo novu kolekciju Set:

javascriptlet set = new Set;

Prođimo kroz paragrafe petljom i postavimo na njih rukovaoc klika:

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

Hajde da sada na klik paragrafa dodajemo taj paragraf u kolekciju:

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

Zbog toga što koristimo kolekciju Set ponovljeni klik na paragraf neće dovesti do dodavanja duplikata paragrafa.

Hajde da sada na klik dugmeta prođemo kroz sadržaj naše kolekcije i svakom paragrafu na kraj dodamo uzvičnik:

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