การส่งคอลแบ็กเพื่อทำงานกับ DOM ใน JavaScript

สมมติว่าเรามีกลุ่มขององค์ประกอบ 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);
  }
}