DOM էլեմենտների ստացում կրկնօրինակներ չունեցող

Ենթադրենք ունենք պարբերություններ և կոճակ.

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

<button>click me</button>

Ենթադրենք օգտատերը կտտացնում է այս պարբերություններին կամայական հերթականությամբ: Եկեք անենք այնպես, որ կոճակը սեղմելիս յուրաքանչյուր պարբերության վերջում, որի վրա կատարվել է կտտոց, ավելացվի բացականչական նշան: Լուծենք խնդիրը Set-ի միջոցով:

Սկսենք: Նախ ստացնենք մեր էլեմենտները փոփոխականների մեջ.

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

Ստեղծենք նոր Set կոլեկցիա.

javascriptlet set = new Set;

Ցիկլով անցնենք պարբերություններով և կախենք դրանց վրա կտտոցի մշակիչ.

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

Եկեք այժմ պարբերության վրա կտտացնելիս ավելացնենք այդ պարբերությունը կոլեկցիայի մեջ.

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

Քանի որ մենք օգտագործում ենք Set կոլեկցիա, պարբերության վրա կրկնակի կտտոցը չի հանգեցնի պարբերության կրկնօրինակի ավելացման:

Եկեք այժմ կոճակի վրա կտտացնելիս անցնենք մեր կոլեկցիայի պարունակության վրայով և յուրաքանչյուր պարբերության վերջում ավելացնենք բացականչական նշան.

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