Henting av DOM-elementer uten duplikater

La oss si at vi har avsnitt og en knapp:

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

<button>click me</button>

La brukeren klikke på disse avsnittene i vilkårlig rekkefølge. La oss gjøre det slik, at ved å trykke på knappen blir det lagt til et utropstegn på slutten av hvert avsnitt som det er klikket på. La oss løse oppgaven via Set.

La oss komme i gang. Først henter vi elementene våre i variabler:

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

La oss opprette en ny Set-samling:

javascriptlet set = new Set;

La oss gå gjennom avsnittene med en løkke og legge til en klikk-håndterer på dem:

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

La oss nå ved klikk på et avsnitt legge til dette avsnittet i samlingen:

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

På grunn av at vi bruker Set-samlingen vil ikke et gjentatt klikk på avsnittet føre til at et duplikat av avsnittet legges til.

La oss nå ved klikk på knappen gå gjennom innholdet i samlingen vår og legge til et utropstegn på slutten av hvert avsnitt:

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