DOM Elementlərinin dublikatsiz alınması

Tutaq ki, bizim abzaslar və düymə var:

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

<button>click me</button>

Istifadəçi bu abzasların üzərinə ixtiyari qaydada klik etsin. Gəlin elə edək ki, düyməyə basıldıqda hər bir klik edilmiş abzasın sonuna nida işarəsi əlavə olunsun. Məsələni Set vasitəsilə həll edək.

Başlayaq. Əvvəlcə elementlərimizi dəyişənlərə əldə edək:

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

Yeni Set kolleksiyası yaradaq:

javascriptlet set = new Set;

Abzasları dövrə ilə gəzib onlara klik hadisəsi əlavə edək:

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

Gəlin indi abzasa klik edəndə həmin abzası kolleksiyaya əlavə edək:

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

Set kolleksiyasından istifadə etdiyimiz üçün abzasa təkrar klik onun dublikat kimi əlavə olunmasına səbəb olmayacaq.

Gəlin indi düyməyə klik edəndə kolleksiyamızın tərkibini gəzək və hər abzasın sonuna nida işarəsi əlavə edək:

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