HTMLへのアクセス方法 - 入力フォーム -

　ここでは入力フォームに対してのアクセス方法について説明します。旧来の記述から新しい記述へと変更してみましょう。
入力フォームのテキストフィールドに入力された文字列をアラートダイアログで表示するサンプルを以下に示します。これは、旧来の方法で記述したものです。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（旧来のもの）</title>
<script type="text/javascript"><!--
function displayName()
{
HN = document.aForm.handleName.value;
alert(HN);
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（旧来のもの）</h1>
<form name="aForm">
ハンドル名：<input type="text" name="handleName"><br>
<input type="button" value="ハンドル名を表示" onClick="displayName()">
</form>
</body>
</html>

　赤字で示している部分が旧来の書き方です。より多くのブラウザで動作させなければならない場合には、旧来の書き方でないと駄目なことがあります。しかし、Ajaxが利用できるブラウザではDOMに対応しているため、このような古い記述方法でなく、getElementById()、getElementsByTagName()、getElementsByName()を利用してアクセスするのがよいでしょう。上記のサンプルの場合、name属性で名前を決定しており、その名前を利用してアクセスしています。これを、新しい記述に変更するにはname属性の代わりにid属性を使います。そして、id属性を使った場合にアクセスするにはgetElementById()を使います。上記サンプルを書き直したものが以下のスクリプトです。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（IDを利用）</title>
<script type="text/javascript"><!--
function displayName()
{
HN = document.getElementById("handleName").value;
alert(HN);
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（IDを利用）</h1>
<form name="aForm">
ハンドル名：<input type="text" id="handleName"><br>
<input type="button" value="ハンドル名を表示" onClick="displayName()">
</form>
</body>
</html>

　赤字部分が新しく変更した部分です。HTMLタグ部分はname属性の代わりにid属性になっています。また、テキストフィールドのデータを読み出す部分もgetElementById()に変更されています。よく見ると旧来の方法ではformタグのname属性での名前も指定していましたが、新しい書き方では全く参照されていません。これはid属性で指定したIDはページ内で唯一のもので、ページ内に同一のIDが存在しないために、直接テキストフィールド（オブジェクト）にアクセスできるためです。ID名が重複してしまった場合には、正しくアクセスできないので注意が必要です。
　では、入力フォームのエレメントは全てIDで指定すればよいか、といえばそうはいかない事情があります。それはラジオボタンです。ラジオボタンはname属性で同じ名前が指定されているものを1つのグループとみなして処理するためです。ラジオボタンの場合にはgetElementById()も使えますが、getElementsByName()を使ってアクセスする方がよいでしょう。
　旧来の方法では以下のようにしてラジオボタンにアクセスします。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（ラジオボタン）</title>
<script type="text/javascript"><!--
function checkRadio()
{
flag = document.aForm.OS[0].checked;
alert(flag);
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（ラジオボタン）</h1>
<form name="aForm">
メインで利用しているOSは？<br>
<input type="radio" name="OS">MacOS X<br>
<input type="radio" name="OS">UNIX<br>
<input type="radio" name="OS">Windows<br>
<input type="button" value="最初のラジオボタンの選択状態を表示" onClick="checkRadio()">
</form>
</body>
</html>

　赤字で示している部分が旧来の書き方の部分です。旧来のものを新しいものに書き換えたのが以下のサンプルになります。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（ラジオボタン2）</title>
<script type="text/javascript"><!--
function checkRadio()
{
flag = document.getElementsByName("OS")[0].checked;
alert(flag);
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（ラジオボタン2）</h1>
<form name="aForm">
メインで利用しているOSは？<br>
<input type="radio" name="OS">MacOS X<br>
<input type="radio" name="OS">UNIX<br>
<input type="radio" name="OS">Windows<br>
<input type="button" value="最初のラジオボタンの選択状態を表示" onClick="checkRadio()">
</form>
</body>
</html>

　ラジオボタンのname属性部分は、そのままです。変わったのは、ラジオボタンへのアクセス方法です。赤字で示すようにgetElementsByName()を使ってラジオボタン名を指定します。すると、結果は配列として返されます。この配列によりラジオボタンへの参照を行うことができます。これは従来のアクセス方法と同じです。ラジオボタンの場合は単純にgetElementsByName()に置き換えるだけですみます。

　入力フォームのエレメントに個別にIDを割り当てるのが面倒な場合もあります。旧来の方法ではforms, elements配列でエレメントにアクセスすることができました。以下のサンプルはelements配列を使って、テキストフィールドの内容を表示するものです。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（elements）</title>
<script type="text/javascript"><!--
function displayName()
{
HN = document.aForm.elements[0].value;
alert(HN);
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（elements）</h1>
<form name="aForm">
ハンドル名：<input type="text"><br>
<input type="button" value="ハンドル名を表示" onClick="displayName()">
</form>
</body>
</html>

　elements[0]というのは、入力フォームの一番最初のエレメントを示します。上記のスクリプトの場合「<input type="text">」を示すことになります。新しい書き方ではelementsではなくchildNodesを使います。実際のサンプルを見てみましょう。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（childNode）</title>
<script type="text/javascript"><!--
function displayName()
{
HN = document.getElementById("aForm").childNodes[1].value;
alert(HN);
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（childNode）</h1>
<form id="aForm">
ハンドル名：<input type="text"><br>
<input type="button" value="ハンドル名を表示" onClick="displayName()">
</form>
</body>
</html>

　新しい方法ではフォームタグを基準として（id属性でID名を指定しています）、経路（ノード）をたどることになります。このサンプルの場合、ノードの基準はformタグになります。その次に文字列があります。この文字列が1番目になります（サンプルで確認する）。



　テキストフィールドは文字列の次なので2番目になります（上図を参照。Firefox 1.5でDOMツリーを表示したもの）。指定する場合には、childNodes[1]のようになります。配列の参照番号は0から始まるので2番目であれば1少ない1になります。ノードがいくつあるかはchildNodes.lengthで求めることができます。従来のelements.lengthと同じです。新しい方法ではノードをたどってアクセスする、ということになります。もちろん、どうしても不具合が発生したり、うまく行かない場合には旧来の方法で回避しても構いません。

　次項では、画像 (imgタグ) へのアクセス方法について説明します。

[第五章　3:HTMLへのアクセス方法 - 画像 -へ]
[目次へ]

(2006.1.11)