##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'の要素を取得してその入力内容をコンソールに出力する。
:::

###実践前のチュートリアル実践に入る前に、完成形を先に表示しておく。 ![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/1286822b-b344-de0d-8d4e-3a54f3b4a15d.gif)

仕組みとしては、以下のようになっている。

テキストボックスにて、任意の文字列を入力する。

入力後、取得ボタンをクリックするとコンソールに出力される。

###マークアップブラウザにテキストボックスやボタンを表示しないといけないので、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>

※inputタグ内の記述に関しては、[こちら](https://qiita.com/Stack_up_Rising/items/238661a082eb3ce8979c#%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97)にて詳細説明済

マークアップしブラウザで表示すると以下のようになる。 ![スクリーンショット 2021-11-08 21.49.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/1126099f-045a-cc6f-4978-d5636b864d64.png)

###JavaScriptの記述次にJavaScriptを仕上げていく。 ####getElementsByNameの処理

index.js

index.js

function showElements() {
  let elements = document.getElementsByName('result');
  console.log(elements[0].value);
}

上記構文に関して、順を追って解説していく。 #####function showElements() :::note warn HTML内のinputタグにあるonclick属性のshowElementsで関数を作成していく。 ::: #####let elements = document.getElementsByName('result'); :::note warn elememtsという変数を定義し、getElementsByNameでHTML内のname属性であるresultをキーに要素を取得する。 ::: #####console.log(elements[0].value); :::note warn 変数elementsは配列なので、先頭の配列を取り出してその内容をコンソールに出力する。 ::: :::note warn .valueで、入力したテキストを取り出す。 ::: ※[0]は、配列の先頭

###ブラウザでの検証実際にブラウザにて挙動を確認していく。 ![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/0ae65fdd-26bf-0f1c-7818-843fc72b80e9.gif) 検証の結果、

テキストに入力した文字列をコンソールへ出力することが出来た。

##5. おわりに
次項:JavaScript DOM操作⑤ 「class属性をキーに要素を取得」に続く。