Yinelenenler Olmadan DOM Elemanlarını Alma

Diyelim ki paragraflarımız ve bir butonumuz var:

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

<button>click me</button>

Kullanıcının bu paragraflara rastgele sırayla tıkladığını varsayalım. Butona tıklandığında, tıklanan her paragrafın sonuna bir ünlem işareti eklenmesini sağlayalım. Bu sorunu Set kullanarak çözelim.

Hadi başlayalım. İlk olarak elemanlarımızı değişkenlere alalım:

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

Yeni bir Set koleksiyonu oluşturalım:

javascriptlet set = new Set;

Paragrafları bir döngü ile geçelim ve onlara tıklama olay işleyicisi ekleyelim:

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

Şimdi bir paragrafa tıklandığında, bu paragrafı koleksiyona ekleyelim:

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

Set koleksiyonunu kullandığımız için, aynı paragrafa tekrar tıklanması, paragrafın yinelenen olarak eklenmesine yol açmayacaktır.

Şimdi butona tıklandığında, koleksiyonumuzun içeriğini geçelim ve her paragrafın sonuna bir ünlem işareti ekleyelim:

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