classやnameの属性取得によってテキストボックスへ値を代入する方法

経緯

Webフォームのテストで毎回手入力するのが面倒だったので、１回実行すれば要素を取得して必要な項目を全部埋めてくれるスクリプトを作ろうと考えた。

idは単数系 / classやnameは複数形

てっきりgetElementByIdのようにclassやname属性についても『getElementBy〜』で要素を取得できるのかと思ったがサジェストされないことに気づく。
単数系と複数形の違いは何なのだろうと思い調べたらこんな記事を見つけた。

class属性とid属性の役割の違い
idが一意であるのに対して、classは再利用前提の考え方とのこと。
デザイナーが二つをどう使い分けてるのか理解できて納得。

複数形なら配列として各要素を取得する

そして本題。
class属性（nameも同様）の要素は複数形が基本であることから、『配列』として全体を見る必要があることが分かる。一度しか登場しない属性であっても下記のような記述でないといけない。

document.getElementsByClassName("hoge")[0].value = "fuga";
document.getElementsByName("foo")[0].value = "bar";

同じclassやnameが画面内に複数回登場するなら配列のインデックスを変えるだけ。
ラジオボタンやプルダウンでも要素を取得してあとはcheckedやselectedIndexを呼び出せばいいだけ。

他にもquerySelectorやquerySelectorAllっていうjQueryライクな汎用性の高いメソッドもあるそうだからそっちも使ってみよ。