フォームにアクセスする

いまさらながらフォームにアクセスする方法をメモ

ざっくりとメモ。

■配列でフォーム要素にアクセス

var opts=document.forms[0].elements;

上記のように配列アクセス演算子でアクセスできる。0番目のフォームにアクセスできる。

「elements」は0番目のフォームの要素全てがふくまれるがこちらも配列でアクセスすることが出来る。
下記の場合だと
0番目のフォームの0番目のエレメントになる。

var opts=document.forms[0].elements[0];

下記のように記述すると0番目のフォームの要素すべてのvalue属性にアクセスして表示できる

//フォーム要素をすべて取得
var opts=document.forms[0].elements;
        //フォームの各要素はlengthプロパティでアクセス
	for(var i=0; i
＊ただし上記のようにまとめて取得するとサブミットボタンまで含まれてしまうのでサブミットボタンを省く。
■フォームにnameを指定してアクセス
フォームやフォームの要素にname属性を指定して直接呼び出すことができる
//フォームに「myform」というname属性をつけてアクセスする
var opts=document.myform.elements;

//配列アクセス演算子で指定してもアクセスできる
var opts=document.forms["myform"];

上記のように配列アクセス演算子でアクセスできる。「myform」のフォームにアクセスできる。
「elements」は「myform」のフォームの要素全てがふくまれるがこちらもname属性を指定して特定の要素にアクセスすることができる。
//radioボタンに「radiogroup」というnameを設定してradioボタンのみ取得
var opts=document.myform.radiogroup;

下記のように記述するとフォーム「myform」のradioボタン「radiogroup」要素すべてのvalue属性にアクセスして表示できる
//フォーム要素をすべて取得
var opts=document.myform.radiogroup;
        //フォームの各要素はlengthプロパティでアクセス
	for(var i=0; i
■getElementBy～を使用してアクセス
いままではname属性やformsの配列アクセス演算子で取得してましたが、javascriptのイベントを使用してアクセスしてみます。
//formにid="someform"を指定してアクセス
var opts=document.getElementById("someform");

各エレメント要素にはいままでのようにname属性で特定の要素を取得してもいいし「elements」で要素すべてを取得してもいい。
または「getElementByTagName」を使用してもよい
すべての要素を取得してそれぞれのタイプにアクセスする場合はtype属性で判別する必要があるので注意
//elementsですべて取得
var opts=document.getElementById("someform").elements;

//getElementByTagNameでinput要素を全て取得する
var opts=document.getElementById("someform").getElementByTagName("input");

//radioボタンのみvalue属性を表示する場合
for(var i=0; i
ここで使用したhtml

赤

青

黄色

りんご

みかん

ばなな






ざっくりとメモって置きましたがのちのち細かいのをメモる予定