JavaScript: getElementsByName()で複数のname属性を指定できる？

JavaScriptのgetElementsByName()メソッドは、 name属性を指定して要素を取得するメソッドですが、 複数のname属性を指定することはできるのでしょうか？

getElementsByName()に複数のname属性を指定してみる。

HTML

name属性「greeting」と、name属性「car」を持つ input要素を用意します。


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

JavaScript

複数のname属性を指定してみます。


let elems = document.getElementsByName('greeting', 'car');

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

console.log(elems);

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

hello
world
NodeList(2) [input, input]

実行結果を見ると、1番目の引数'greeting'の要素のみが取得できています。 2番目以降の引数は無視されています。

ここで、引数の指定方法を変えて見ましょう。

内側でのカンマ区切り「getElementsByName('greeting, car')」や、
空白区切り「getElementsByName('greeting car')」で指定した場合、


// 実行結果 ----

NodeList []

となり、空のLodeListオブジェクトが返ってきます。

以上を踏まえて、結論としては、

getElementsByName()では、複数のname属性を指定しても同時に取得することはできません。

代替方法: querySelectorAll()メソッド

複数のname属性を指定して、要素を取得したい場合は、 getElementsByName()の代わりに、querySelectorAll()メソッドを使います。

上のHTMLを利用して、name属性「greeting」とname属性「car」を持つ要素を取得する場合は、 属性セレクタを使って次のように指定します。


let  elems = document.querySelectorAll('[name="greeting"], [name="car"]');

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

console.log(elems);

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

hello
world
toyota
honda
NodeList(4) [input, input, input, input]

まとめ

・getElementsByName()で複数の引数を指定しても、2番目以降の引数は無視されます。

・name属性を複数指定したい場合は、querySelectorAll()メソッドを使います。

JavaScript入門