JavaScriptでのDOM操作のためのコールバック渡し

いくつかのDOM要素のグループがあるとします：

html<p class="elem">1</p>
<p class="elem">2</p>
<p class="elem">3</p>
<p class="elem">4</p>
<p class="elem">5</p>

関数 forEach を作成しましょう。この関数は 第一引数に要素グループのセレクタを受け取り、 第二引数に コールバック関数 を受け取ります。このコールバックは、 見つかった各要素に順番に適用されます：

javascriptforEach('.elem', function() {
  // 関数は各要素に適用されます
});

セレクタに一致した要素が、 コールバックの第一引数に順番に入るようにしましょう：

javascriptforEach('.elem', function(elem) {
  console.log(elem); // 見つかった要素を順番に出力します
});

作成した関数を使用して、クラス elem を持つ すべての要素を見つけ、各要素のテキストを2乗する コールバックを適用してみましょう：

javascriptforEach('.elem', function(elem) {
  elem.textContent = elem.textContent ** 2;
});

次に、私たちが考えた関数 forEach の実装を 記述しましょう：

javascriptfunction forEach(selector, func) {
  let elems = document.querySelectorAll(selector);
  
  for (let elem of elems) {
    func(elem);
  }
}