Додани callback барои кор бо 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 созем, ки параметри якум он селектори гурӯҳи элементҳо, ва параметри дуюм - функсияи callback-ро қабул мекунад, ки ба ҳар як аз элементҳои ёфташуда баробар татбиқ карда мешавад:

forEach('.elem', function() {
	// функсия ба ҳар як элемент татбиқ карда мешавад
});

Бигзор элементҳое, ки дар зери селектор қарор гирифтанд, дар параметри якуми callback бо тартиб ворид шаванд:

forEach('.elem', function(elem) {
	console.log(elem); // элементҳои ёфташударо бо тартиб чоп мекунад
});

Биёед бо ёрии функсияи мо ҳамаи элементҳои бо синфи elem-ро ёбем ва барои ҳар як элементи ёфташуда callback-ро татбиқ кунем, ки мати ҳар як элементро ба квадрат мебарад:

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, ки мо сохтем, барои ҳар як параграф аломати тааҷҷубро ба охири матнаш илова кунед.