JavaScriptにおけるDOM要素の番号付け

イテレータを理解することで、DOM要素に簡単に番号を追加できます。 例えば、次のような段落があるとします:

html<p>text</p>
<p>text</p>
<p>text</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;
}