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를 가진 모든 요소를 찾고, 각 찾은 요소에 대해 요소의 텍스트를 제곱하는 콜백을 적용해 보겠습니다:

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);
  }
}