##1. はじめに
本記事では、JavaScript DOM操作の
「タグ名をキーに要素を取得」
について記載する。
##2. getElementsByTagName
###役割
:::note
HTML内の指定したタグ名を持つ要素を取得するメソッド
:::
##3. どうやって書くの?
###構文
構文は以下のようになる。
index.js
let 変数名 = document.getElementsByTagName('タグ名');
###補足
:::note warn
()内にHTML内で記載したタグ名を記述する。
(タグ名はシングルクォーテーションorダブルクォーテーションで囲う)
:::
##4. 例題
###内容
:::note warn
タグ名が<div>の要素を取得し、その内容をコンソールへ出力する。
:::
###実践前のチュートリアル 実践に入る前に、完成形を先に表示しておく。 ![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/0c4fbb59-a67a-c372-25a3-bf035fcd4436.gif) 仕組みとしては、以下のようになっている。
HTMLに5つのタグを記述し、5つのタグ内には要素を記述する。+取得ボタン込み
取得ボタンをクリックすると、JavaScriptで指定したタグ内の要素をコンソールへ出力するようにする。
###マークアップ ブラウザに文字列を表示しないといけないので、HTMLの作成から取り掛かる。
index.html
```index.html
Document
```
要素1(div)
要素2(p)
要素3(div)
要素4(span)
要素5(div)
<input type="button" value="取得" onclick="showElements()" />
<script src="js/index.js"></script>
マークアップしブラウザで表示すると以下のようになる。 ![スクリーンショット 2021-11-07 18.30.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/b06769f1-04ba-6564-d339-cd2135409dfc.png)
###JavaScriptの記述 次にJavaScriptを仕上げていく。 ####getElementsByTagNameの処理
index.js
index.js
function showElements() {
let elements = document.getElementsByTagName('div');
for (let i = 0; i < elements.length; i++) {
console.log(elements[i].innerText);
}
}
###ブラウザでの検証 実際にブラウザにて挙動を確認していく。 ![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/3aed80c3-1581-8bda-5f18-ca4f7b97809d.gif) 検証の結果、
複数のタグの中で、<div>タグ内の要素をコンソールへ出力するすることが出来た。
##5. おわりに
次項:JavaScript DOM操作④ 「name属性をキーに要素を取得」に続く。