getElementsByClassNameは、getElementByIdと扱いが違う

前に、getElementsByClassNameでDOM操作をしようとして、getElementByIdと同じように扱ったらダメなことを知っていたけど、どうやったら良いか忘れたので、メモ

戻り値が違う

getElementsByClassName の戻り値：HTMLCollection

getElementsByTagName の戻り値：HTMLCollection

querySelectorAll の戻り値：NodeList

このため、getElementsByClassName で取得した場合は、変換する必要がある。

let kirikae = document.getElementsByClassName("js-kirikae");
// 配列に変換
var kirikaeArray = Array.prototype.slice.call(kirikae);
// for文で操作する
for (var i = 0; i < kirikaeArray.length; i++) {
  // input要素　class名がjs-kirikaeの、requiredを消す
  kirikaeArray[i].required = false;
  // コンソールに表示する
  console.log(kirikaeArray[i]);
}

このような方法もあるみたい（使ったことなし）

let kirikae = document.getElementsByClassName("js-kirikae");
// HTMLCollectionを配列へ変換
const htmlCollectionArray = Array.prototype.slice.call(kirikae);

また、Array.prototype.forEach.callを使う方法もあるみたい。