重複なしでの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 + '!';
  }
});