##1. はじめに
本記事では、JavaScript DOM操作の
「name属性をキーに要素を取得」
について記載する。
##2. getElementsByName
###役割
:::note
・指定したname属性を持つ要素を取得するメソッド。
・ラジオボタン、チェックボックスなど、name属性が等しい要素郡の取得に利用される。
:::
##3. どうやって書くの？
構文は以下のようになる。
index.js
let 変数名 = document.getElementsByName(name);
※()内のnameは、name属性を指す。
##4. 例題
###内容
:::note warn
テキストボックスとボタンを配置する。
:::
:::note warn
ボタンをクリックしたら、name属性が'result'の要素を取得してその入力内容をコンソールに出力する。
:::
###実践前のチュートリアル 実践に入る前に、完成形を先に表示しておく。 
仕組みとしては、以下のようになっている。
テキストボックスにて、任意の文字列を入力する。
入力後、取得ボタンをクリックするとコンソールに出力される。
###マークアップ ブラウザにテキストボックスやボタンを表示しないといけないので、HTMLの作成から取り掛かる。
index.html
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input name="result" type="text" />
<input type="button" value="取得" onclick="showElements()" />
<script src="js/index.js"></script>
</body>
</html>
マークアップしブラウザで表示すると以下のようになる。 
###JavaScriptの記述 次にJavaScriptを仕上げていく。 ####getElementsByNameの処理
index.js
index.js
function showElements() {
let elements = document.getElementsByName('result');
console.log(elements[0].value);
}
###ブラウザでの検証 実際にブラウザにて挙動を確認していく。  検証の結果、
テキストに入力した文字列をコンソールへ出力することが出来た。
##5. おわりに
次項:JavaScript DOM操作⑤ 「class属性をキーに要素を取得」に続く。