DOM-elementtien numerointi JavaScriptissä

Iteraattoreiden ymmärtäminen mahdollistaa DOM-elementtien helpon numerointiin. Oletetaan esimerkiksi, että meillä on kappaleet:

html<p>teksti</p>
<p>teksti</p>
<p>teksti</p>

Haetaan nämä kappaleet kokoelmaan muuttujaan:

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

Käytetään sisäänrakennettua iteraattoria entries läpikäyntiin:

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

Hyödynnetään destrukturointia erottamaan numerot elementeistä:

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

Lisätään jokaiselle kappaleelle sen järjestysnumero loppuun:

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