※ タイトルに誤りがありました。大変失礼しました。
× getElementsByClass
○ getElementsByClassName

皆様大変ご無沙汰しています！
ホワイトボードの末ちゃんこと末吉です。

さて、今回ちょっとした小技を紹介します。
JavaScriptでdocument.getElementsByClassNameで要素を取得したとき、
配列にならずに困ることありますよね。

それの対策方法お伝えします。

まずは要素を取得する

以下のHTMLがあったとしましょう。

<input type="checkbox" class="test_element" name="one">
<input type="checkbox" class="test_element" name="two" checked>
<input type="checkbox" class="test_element" name="three">

この要素をJavaScriptで取得するにはこうなります。

const hoge = document.getElementsByClassName('test_element');

条件に沿うときに処理をしたい

動かないパターン・・・

さて、checked のときに何らかの処理をしたいとします。
順当に行くとこんな感じでコードを書くでしょうか。

for (let i = 0; i < hoge.length; i += 1) {
  if (hoge[i].checked === true) {
    console.log(hoge[i].checked);
  }
}

しかし、これは動かないんですね・・・。
なんでかというと実はHTMLCollectionという配列とは違うものが帰ってきます。

Array.prototype

そこで、Array.prototypeを使って配列に変換します。

const fuga = Array.prototype.slice.call(hoge);

そしてループを実行しましょう。hogeをfugaに直します。

for (let i = 0; i < fuga.length; i += 1) {
  if (fuga[i].checked === true) {
    console.log(fuga[i].checked);
  }
}

そうすると・・・

はい、無事 if が通りました。

まとめ

このようにうっかりすると、なんで？ということがたまにあります。
jQueryを使うと楽なのかもしれませんが、昨今排除する動きもあるし、
実際、そこまでjQueryの機能を使っていないことがほとんど。

せいぜいDOMの操作のための関数しか使わないのに80kbものデータを置くのは、
ネットワークコストが勿体ないですよね。

できる限りvanilla JSで書ければとても良いかなと思います。

それではまたお会いしましょう。