Αρίθμηση Στοιχείων DOM στην JavaScript

Η κατανόηση των επαναληπτών επιτρέπει την εύκολη προσθήκη αριθμών σε στοιχεία DOM. Ας υποθέσουμε, για παράδειγμα, ότι έχουμε παραγράφους:

html<p>κείμενο</p>
<p>κείμενο</p>
<p>κείμενο</p>

Ας πάρουμε τη συλλογή αυτών των παραγράφων σε μια μεταβλητή:

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

Ας χρησιμοποιήσουμε τον ενσωματωμένο επαναλήπτη entries για την επανάληψη:

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

Ας χρησιμοποιήσουμε αποδόμηση για να διαχωρίσουμε τους αριθμούς από τα στοιχεία:

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

Ας προσθέσουμε σε κάθε παράγραφο στο τέλος τον τακτικό του αριθμό:

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