JavaScript - getElementsByName()の使い方

JavaScriptで「name属性」から該当要素を取得する場合は、 getElementsByName()メソッドを使います。

複数の要素を取得できる可能性があるため 「Elements」と複数形になっています。

戻り値はNodeListオブジェクトです。

getElementsByName()の構文

document.getElementsByName('name')

name = name属性値

サンプルコード

HTML

name属性値が「greeting」の入力ボックスを２つ用意します。

<form>
	<input type="text" name="greeting" value="hello"/>
	<input type="text" name="greeting" value="world"/>
</form>

JavaScript

name属性「greeting」を指定し、入力ボックスの値を表示します。

var elems = document.getElementsByName('greeting');

for (var i = 0; i < elems.length; i++){
	console.log(elems[i].value);
}

// 実行結果 --------

hello
world

該当name属性がない場合

先程と同じHTMLで、存在しないname属性を指定してみます。

var elems = document.getElementsByName('hoge');

for (var i = 0; i < elems.length; i++){
	console.log(elems[i].value);
}

console.log(elems);

// 実行結果 ----

NodeList []

NodeList [] と表示されているように、 空のNodeListオブジェクトを返します。

getElementsByName()を使うケース

一般的に、getElementsByName()を使うのは、 フォーム内の同じname属性をもつフォーム部品の要素を取得するケースになります。

ですからgetElementById()、getElementsByTagName()、getElementsByClassName() などに比べると使う機会が限定されるでしょう。