DOM-elementtien numerointi JavaScriptissä
Iteraattoreiden ymmärtäminen mahdollistaa DOM-elementtien helpon numerointiin. Oletetaan esimerkiksi, että meillä on kappaleet:
<p>teksti</p>
<p>teksti</p>
<p>teksti</p>
Haetaan nämä kappaleet kokoelmaan muuttujaan:
let elems = document.querySelectorAll('p');
Käytetään sisäänrakennettua
iteraattoria entries läpikäyntiin:
for (let entry of elems.entries()) {
console.log(entry);
}
Hyödynnetään destrukturointia erottamaan numerot elementeistä:
for (let [num, elem] of elems.entries()) {
console.log(num, elem);
}
Lisätään jokaiselle kappaleelle sen järjestysnumero loppuun:
for (let [num, elem] of elems.entries()) {
elem.textContent += num;
}
Annettu HTML-taulukko. Numeroi jokainen tämän taulukon solu.
