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 · ベストアンサー

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

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

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

回答No.4

think49

HTMLDocument#getElementsByName は DOM L2 HTML 規定および HTML Standard (HTML5) 規定では name 属性値を元に NodeList を返す仕様です。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/HTML/HTMLDocument.html#HTMLDocument-getElementsByName
http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#documents-in-the-dom
対して、IE (IE9 では修正されているかもしれません) は id, name 属性値を元に HTMLElementCollection を返す仕様になっています。
http://msdn.microsoft.com/en-us/library/windows/apps/hh465829.aspx
NodeList と HTMLElementCollection の違いは小さなものですが、id 属性値を含んで返す IE の仕様には注意する必要があります。

> Nameは一意になるよう作っています
name の中で一意にするのではなく、id, name の中で一意にしなければなりません。
id と name で重複した名前を使用しないほうがいいでしょう。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/HTML/HTMLFormElement.html#HTMLFormElement-elements
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-ref/HTML/HTMLFormElement.html#HTMLFormElement-elements

回答No.2

fujillin

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

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

とか。

回答No.1

kosukejlampnet

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