Document.getElementsByName() - name属性からノードを取得する

2017/10/07

getElementsByName()は、Documentのメソッドです。name属性を指定してノードを取得します。

概要

名前

getElementsByName

所属

IDL

NodeList getElementsByName(DOMString elementName);

仕様書

https://html.spec.whatwg.org/multipage/dom.html#dom-document-getelementsbyname

説明

引数(elementName)には、対象のname属性を指定します。

返り値は、ノードの集合であるNodeListです。

チュートリアル

getElementsByName()は、name属性を指定してノードを取得します。ラジオボタンなどのグループを取得するのに便利です。

<form action="./form.php">
	<input type="radio" name="hoge" value="AAA">選択肢1
	<input type="radio" name="hoge" value="BBB">選択肢2
	<input type="radio" name="hoge" value="CCC">選択肢3
	<button>内容を送信</button>
</form>

var nodeList = document.getElementsByName( "hoge" ) ;	// NodeList

nodeList[0] ;	// <input type="radio" name="hoge" value="AAA">
nodeList[1] ;	// <input type="radio" name="hoge" value="BBB">
nodeList[2] ;	// <input type="radio" name="hoge" value="CCC">

デモ

Document.getElementsByName()のデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
	div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<input type="radio" name="hoge" value="AAA">選択肢1
<input type="radio" name="hoge" value="BBB">選択肢2
<input type="radio" name="hoge" value="CCC">選択肢3
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "result" ) ;
var nodeList = document.getElementsByName( "hoge" ) ;

console.log( nodeList ) ;
element.textContent = nodeList + "\n\n" ;

element.textContent += nodeList[0].outerHTML + "\n" ;
element.textContent += nodeList[1].outerHTML + "\n" ;
element.textContent += nodeList[2].outerHTML + "\n" ;
</script>
</body>
</html>