getElementsByNameについて

JSでプルダウンの選択値をとりたくて、以下のように書きました。

var select = document.getElementById('test');
var options = document.getElementById('test').options;
var value = options.item(select.selectedindex).value;

都合により、getElementByIdではなくてgetElementsByNameで
同様のことをしたいのですが、単純にgetElementsByNameに
置換しただけでは動きませんでした。
（Nameは一意になるよう作っています）
確か配列でデータが来るとかいう話を聞いた覚えがあるので、
どこかにインデクサを指定すればいけるでしょうか？
申し訳ないですが、ご教授ください。

No.3 ベストアンサー 回答者： nda23 回答日時： 2012/02/09 10:23

日本語は単数/複数の使い分けが

いい加減なのですが、英語は厳密で、
動詞などが活用変化しますよね。
英語起源のプログラム言語も同様に
単数/複数の使い分けが重要です。
getElementById：
単数形なので、単一オブジェクトが
返ります。
getElementsByName：
複数形なので、オブジェクトの集合
つまり、コレクションが返ります。
特定するにはインデックスやIDで
一意にする必要があります。

ついでに言うと、valueは単数ですが、
optionsは複数なので、selectedIndexで
インデックスを指定しないと、選択した
値が取れません。

同じようなものにformとforms、
windowとwindowsなどがあります。
単複によるオブジェクト/コレクションの
違いはJavaScriptだけでなく、他の
多くの言語でも見られることです。

No.4 回答者： think49 回答日時： 2012/02/10 17:57

HTMLDocument#getElementsByName は DOM L2 HTML 規定および HTML Standard (HTML5) 規定では name 属性値を元に NodeList を返す仕様です。

http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-re …
http://www.whatwg.org/specs/web-apps/current-wor …
対して、IE (IE9 では修正されているかもしれません) は id, name 属性値を元に HTMLElementCollection を返す仕様になっています。
http://msdn.microsoft.com/en-us/library/windows/ …
NodeList と HTMLElementCollection の違いは小さなものですが、id 属性値を含んで返す IE の仕様には注意する必要があります。

> Nameは一意になるよう作っています
name の中で一意にするのではなく、id, name の中で一意にしなければなりません。
id と name で重複した名前を使用しないほうがいいでしょう。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-re …
http://d.hatena.ne.jp/sandai/20100823/p1#002

以上のマークアップ規約を守れば、次のように書けます。

var select = document.getElementsByName('test')[0], // id="test" が存在せず、name="test" が一つだけ存在するなら、NodeList の初めの要素が目的の要素となる
options = select.options,
value = options.item(select.selectedindex).value;

管理が面倒になりがちなので、私としては getElementsByName ではなく、HTMLFormElement#elements による参照をお勧めします。
document.getElementsByTagName('form')[0].elements.namedItem('test');
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-re …

No.2 回答者： fujillin 回答日時： 2012/02/09 08:55

nameの対象が必ず存在して、一意かつselectであることがわかっているのなら

　var value = document.getElementsByName('test')[0].value;

とか。

No.1 回答者： kosukejlampnet 回答日時： 2012/02/09 01:40

たとえば、

var options = document.getElementsByName('test').options;
の場合、
option[0]
になります