Dublikatsiz DOM elementlerini almak

Bizde abzaslar we düwme bar diýeliň:

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

<button>click me</button>

Ulanyjy bu abzaslara islendik tertipde basýar diýeliň. Bir düwmä basylanyňda, basylan her abzasyň soňuna çykyş belgisini goşýan bir funksiýa ýasalyň. Mesele Set arkaly çözeliň.

Başlalyň. Ilki bilen elementlerimizi üýtgeýjilere alýarys:

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

Täze bir Set ýygnamasyny dörediň:

javascriptlet set = new Set;

Abzaslary aýlaw bilen gezip, olara basylma hereketiniň işleýjisini baglaň:

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

Indi bir abzasa basylanyňda, şol abzasy ýygnamanyň içine goşalyň:

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

Set ýygnamasyny ulanandygymyz üçin, bir abzasa gaýtadan basylmagy, şol abzasyň dublikatynyň goşulmagyna getirmez.

Indi düwämä basylanyňda, ýygnamanyň mazmunyny gezip, her abzasyň soňuna çykyş belgisini goşalyň:

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