あるクラスを持った要素だけに変更を加えたい場合に、for文を使って対応。

それと、特定のクラス要素内のテキスト差し替え方法の備忘録。

※forEach文で実行する場合も追記しました

for文で実行する場合

HTML

<div>
  <p class="odd">奇数テキスト</p>
  <p class="even">偶数テキスト</p>
  <p class="odd">奇数テキスト</p>
  <p class="even">偶数テキスト</p>
  <p class="odd">奇数テキスト</p>
  <p class="even">偶数テキスト</p>
</div>

JavaScript

window.onload = function() {
  var ele = document.getElementsByClassName("odd");
  for(var i = 0; i < ele.length; i++){
    ele[i].innerHTML= i + ele[i].textContent;
  }
}
/*
 * 実行結果
 *
0奇数テキスト
偶数テキスト
1奇数テキスト
偶数テキスト
2奇数テキスト
偶数テキスト
*/

forEach文で実行する場合

HTML

<div>
  <p class="odd">奇数テキスト</p>
  <p class="even">偶数テキスト</p>
  <p class="odd">奇数テキスト</p>
  <p class="even">偶数テキスト</p>
  <p class="odd">奇数テキスト</p>
  <p class="even">偶数テキスト</p>
</div>

JavaScript

window.onload = function() {
  var ele = document.getElementsByClassName("even");
  var ele_arr = Array.from(ele) ;
  ele_arr.forEach( (element, index) => {
    element.innerHTML = index + element.textContent;
  });
}
/*
 * 実行結果
 *
奇数テキスト
0偶数テキスト
奇数テキスト
1偶数テキスト
奇数テキスト
2偶数テキスト
*/