コントロールの参照方法

PREF_CDのテキストボックスなど、ブラウザ上に配置したコントロールの値を操作する方法はいろいろありますので、ここでまとめておきます。これまでコントロールにはidとnameを両方書いていましたが、どの使い方でも対応できるようにするためです。べつに片方だけでもかまいません。上手く使い分けましょう。

以下はすべて同じ意味になります。

1.documentからすべて指定する方法
document.form1.txtPrefCd.value = "";
最も一般的な方法でnameに付けた名前を使います。with()を使えば少しは短くなります。


2.idを使う方法
document.getElementById("txtPrefCd").value = "";

3.nameを使う方法
document.getElementsByName("txtPrefCd")[0].value = "";

htmlに書いたidはgetElementById、nameはgetElementsByNameに対応していて、少しだけ使い方が違います。よく見るとgetElementsByNameは「Elements」と複数形になっていますね。つまり配列になるので、[0]、[1]、、、のように何番目を使うか番号で指示する必要があります。nameはコントロールを配列として一度に操作したい時に便利です。まぎらわしいですが0が最初の配列です。

document.getElementsByName("txtPrefCd").value = "";
と書くと動きません。


4.コントロールを一度変数に代入してから扱う方法
var txtPrefCd = document.getElementById("txtPrefCd");
txtPrefCd.value = "";


5.formsやelementsを使う方法
var txtPrefCd = document.forms[0].elements[0];
txtPrefCd.value = "";

ブラウザ上のコントロールはformsやelementsを使うと、配列として扱えます。フォームも複数ある場合がありますので何番目のフォームか指示します。0番目のフォーム上にある0番目のコントロールというふうに使います。コントロールを配列として一度に操作したい時に便利です。


6.this や this.formを使う方法
イベントハンドラの設定で関数を呼び出すときの引数として使うと、コントロールが短い名前で使えます。

＊objはtxtPrefCdを参照しています。
document.getElementById("txtPrefCd").onblur = function (){test(this);}
function test(obj){
  obj.value = "";
}


＊objはtxtPrefCdがあるフォームを参照しています。
document.getElementById("txtPrefCd").onblur = function (){test(this.form);}
function test(obj){
  obj.txtPrefCd.value = "";
}