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

สมมติว่าเรามีกลุ่มขององค์ประกอบ DOM บางกลุ่ม:

<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 ขึ้นมา โดยที่ พารามิเตอร์แรกจะรับセレクター ของกลุ่มองค์ประกอบ และพารามิเตอร์ที่สองจะรับ ฟังก์ชันคอลแบ็ก, ซึ่งจะถูกนำไปใช้กับแต่ละองค์ประกอบที่พบตามลำดับ:

forEach('.elem', function() {
	// ฟังก์ชันจะถูกนำไปใช้กับแต่ละองค์ประกอบ
});

ให้องค์ประกอบที่ตรงกับセレクター เข้ามาในพารามิเตอร์แรกของคอลแบ็กตามลำดับ:

forEach('.elem', function(elem) {
	console.log(elem); // จะแสดงองค์ประกอบที่พบตามลำดับ
});

ลองใช้ฟังก์ชันของเราหาองค์ประกอบทั้งหมด ที่มีคลาส elem และสำหรับแต่ละ องค์ประกอบที่พบ ให้นำคอลแบ็กไปใช้ เพื่อยกกำลังสองข้อความของแต่ละองค์ประกอบ:

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

ตอนนี้เรามาเขียนการ実現 ฟังก์ชัน forEach ตามที่เราตั้งใจไว้:

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

มีพารากราฟที่กำหนดให้ ใช้ฟังก์ชัน forEach ที่เราสร้างขึ้นเพื่อเพิ่มเครื่องหมายอัศเจรีย์ ไปที่ท้ายข้อความของแต่ละพารากราฟ