Javascriptで同じクラスを持つ複数の入力値を取得する

Javascriptを使って、任意のHTML要素にアクセスする方法です。

##同じクラスのinput(入力値）を取得
例えば、このようなコンタクトフォームがあるとします。

index.html

<h2>お問い合わせフォーム</h2>
<form class="contactForm" action="" method="post">
<table>
 <tr>
  <th><label>お名前</label></th>
  <td><input class="item" type="text" name="name" value="タンジロウ"></td>
 </tr>
 <tr>
  <th><label>メールアドレス</label></th>
  <td><input class="item" type="email" name="email" value="[e-mail]"></td>
 </tr>
 <tr>
  <th><label>電話番号</label></th>
  <td><input class="item" type="tel" name="tel" value="090-1234-5678"></td>
 </tr>
 <tr>
  <th><label>お問い合わせ内容</label></th>
  <td><textarea class="item" name="message">お問い合わせ内容テキスト</textarea></td>
 </tr>
 <tr>
  <td><input type="submit" id="submitBtn" name="btn_confirm" value="送信"></td>
 </tr>
 </form>
</table>

全ての入力値に適切な値が入っているかを確認する為に、同じクラスitemをキーに要素を取得します。

##getElementsByClassName

getElementsByClassNameは同じクラス名を検索して、返り値に配列風のHTMLCollectionを返します。elementにsがついていることに注意してください。

main.js

const ItemList = document.getElementsByClassName("item"); 

for(let i = 0; i < ItemList.length; i++) {
    console.log(ItemList.item(i).value);
}

コンソールの出力結果

コンソールの出力結果です。Itemにアクセスすることで好きな値をチェックすることができます。

クラス名を複数指定すると、and指定となり両方のクラスを持つ要素を取得できます。

document.getElementsByClassName("item email")

HTMLCollectionを配列に変換

配列に変換することで、配列のメソッドが使えるようにすることもできます。用途によって、使い分けましょう。

main.js

const ItemArray = Array.prototype.slice.call(ItemList);

ItemArray.forEach(function(array) {
    console.log(array);
});

コンソールの出力結果