##1. はじめに
本記事では、JavaScript DOM操作の
「class属性をキーに要素を取得」
について記載する。
##2. getElementsByClassName
###役割
:::note
指定したclass属性を持つ要素を取得するメソッド
:::
##3. どうやって書くの？
構文は以下のようになる。

index.js

let 変数名 = document.getElementsByClassName(name);

※()内のnameは、class属性の値を指す。
##4. 例題
###内容
:::note warn
ボタンをクリックしたら、class名が'foo'の要素を取得し、その内容をコンソールに出力する。
:::

###実践前のチュートリアル実践に入る前に、完成形を先に表示しておく。 ![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/1e9e3770-c7b1-5611-66dc-d0ae1217c53e.gif) 仕組みとしては、以下のようになっている。

取得ボタンをクリックすると、class属性が'foo'であるタグ内のテキストがコンソールへ出力される。

###マークアップブラウザにテキストボックスやボタンを表示しないといけないので、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>
    <ul>
      <li class="foo">要素1</li>
      <li class="bar">要素2</li>
      <li class="foo">要素3</li>
      <li>要素4</li>
      <li class="bar">要素5</li>
    </ul>
    <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-09 15.15.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/f2665aa6-ad17-dab9-6aa9-941e9b352dfb.png)

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

index.js

index.js

function showElements() {
  let elements = document.getElementsByClassName('foo');
  for (let i = 0; i < elements.length; i++) {
  console.log(elements[i].innerText);
  }
}

上記構文に関して、順を追って解説していく。 #####function showElements() :::note warn HTML内のinputタグにあるonclick属性のshowElementsで関数を作成していく。 ::: #####let elements = document.getElementsByClassName('foo'); :::note warn elememtsという変数を定義し、getElementsByClassNameでHTML内のclass属性である'foo'をキーに要素を取得する。 ::: #####for (let i = 0; i < elements.length; i++) :::note warn forを使う理由として、HTML内の要素を取得するために繰り返し処理を実行する必要があるため。 ::: #####console.log(elements[i].innerText); :::note warn コンソールへ出力する際、forで定義した変数iを配列として記述し、innerTextと結合させることによってタグ内の要素を出力することができる。 :::

###ブラウザでの検証実際にブラウザにて挙動を確認していく。 ![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/0823b2ad-1bcb-ff01-8a9b-2caa001bfb6f.gif) 検証の結果、

class属性'foo'を持つ要素をコンソールへ出力することができた。

##5. おわりに
次項:JavaScript DOM操作⑥ 「ノードの追加」に続く。