Nummering van DOM-elementen in JavaScript

Het begrijpen van iterators maakt het gemakkelijk om nummers aan DOM-elementen toe te voegen. Stel dat we bijvoorbeeld de volgende alinea's hebben:

html<p>tekst</p>
<p>tekst</p>
<p>tekst</p>

Laten we een verzameling van deze alinea's in een variabele zetten:

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

Laten we de ingebouwde iterator entries gebruiken om ze te doorlopen:

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

Laten we destructuring gebruiken om de nummers van de elementen te scheiden:

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

Laten we aan het einde van elke alinea zijn volgnummer toevoegen:

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