Как вывести порядковый номер элемента через цикл for of?

Question

[Валентин Попов]

Возможно ли через цикл for of просто вывести порядковый номер элементов. Например у меня есть в HTML структура:

<h2 class="one">Какой-то заголовок</h2>
    <p class="one">Какой-то текст</p>
    <p class="one">Какой-то текст</p>
<button id="btn" onclick="btnClick()">Нажми на меня!</button>

Я планирую заменить текст элементов с классом 'one' на их порядковый номер.
Я могу сделать это через цикл for так :

function btnClick(){
  let elems = document.getElementsByClassName('www');
  
  for(let i = 0; i < elems.length; i++){
    elems[i].textContent = i+1;
  }
 
}

А как также просто заменить текст элемента на их порядковый номер через цикл for of? Возможно ли такое?

Comments

[Dima Polos]

А зачем именно через for of? С этим будут проблемы потом даже после babel, в частности для этого цикла нужны полифилы для ИЕ...

Answer 1

[0xD34F]

Object.entries + деструктуризация:

for (const [ index, el ] of Object.entries(elems)) {
  ...

Надо только иметь в виду, что тут index будет строкой. Чтобы получать числа, можно позаимствовать метод entries у Array или NodeList:

for (const [ index, el ] of Array.prototype.entries.call(elems)) {
  ...

Или, превращать получаемую HTMLCollection в массив:

const elems = [...document.getElementsByClassName('one')];
for (const [ index, el ] of elems.entries()) {
  ...

Или, для получения элементов вместо getElementsByClassName использовать querySelectorAll, возвращающий NodeList:

const elems = document.querySelectorAll('.one');
for (const [ index, el ] of elems.entries()) {
  ...

Answer 2

[Lumore]

elems.map((item, index) => {
  item.textContent = index
})

==============================

elems.forEach(function(val, index) {
  elems[index].textContent = index;
});