Номериране на DOM елементи в JavaScript

Разбирането на итераторите позволява лесно да се добавят номера към DOM елементи. Нека, например, имаме абзаци:

html<p>text</p>
<p>text</p>
<p>text</p>

Нека получим колекция от тези абзаци в променлива:

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

Нека използваме вградения итератор entries за обхождане:

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

Нека използваме деструктуриране, за да отделим номерата от елементите:

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

Нека добавим към всеки абзац в края неговия пореден номер:

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