DOM элементларини JavaScript да рақамлаш

Итераторларни тушуниш DOM элементларини осонлик билан рақамлаш имконини беради. Масалан, бизда қуйидаги абзацлар бор деб фараз қилайлик:

<p>матн</p>
<p>матн</p>
<p>матн</p>

Келик, бу абзацлар коллекциясини ўзгарувчига оламиз:

let elems = document.querySelectorAll('p');

Уларни санash учun ички итератор entries дан фойдаланамиз:

for (let entry of elems.entries()) {
	console.log(entry);
}

Рақамларни элементлардан ажратиш учун деструктуризациадан фойдаланамиз:

for (let [num, elem] of elems.entries()) {
	console.log(num, elem);
}

Ҳар бир абзацнинг охирига унинг тартиб рақамини қўшамиз:

for (let [num, elem] of elems.entries()) {
	elem.textContent += num;
}

HTML жадвал берилган. Жадвалнинг ҳар бир катасини рақамланг.