Numerowanie elementów DOM w JavaScript

Zrozumienie iteratorów pozwala łatwo dodać numery do elementów DOM. Załóżmy, na przykład, że mamy akapity:

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

Pobierzmy kolekcję tych akapitów do zmiennej:

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

Użyjmy wbudowanego iteratora entries do przejrzenia:

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

Użyjmy destrukturyzacji, aby oddzielić numery od elementów:

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

Dodajmy każdemu akapitowi na końcu jego numer porządkowy:

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