Numérotation des éléments DOM en JavaScript

Comprendre les itérateurs permet d'ajouter facilement des numéros aux éléments DOM. Supposons, par exemple, que nous ayons des paragraphes :

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

Récupérons la collection de ces paragraphes dans une variable :

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

Utilisons l'itérateur intégré entries pour les parcourir :

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

Utilisons la déstructuration pour séparer les numéros des éléments :

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

Ajoutons à chaque paragraphe à la fin son numéro d'ordre :

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