##1. はじめに
本記事では、JavaScript DOM操作の
「class属性をキーに要素を取得」
について記載する。
##2. getElementsByClassName
###役割
:::note
指定したclass属性を持つ要素を取得するメソッド
:::
##3. どうやって書くの？
構文は以下のようになる。
index.js
let 変数名 = document.getElementsByClassName(name);
※()内のnameは、class属性の値を指す。
##4. 例題
###内容
:::note warn
ボタンをクリックしたら、class名が'foo'の要素を取得し、その内容をコンソールに出力する。
:::
###実践前のチュートリアル 実践に入る前に、完成形を先に表示しておく。  仕組みとしては、以下のようになっている。
取得ボタンをクリックすると、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>
マークアップしブラウザで表示すると以下のようになる。 
###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);
}
}
###ブラウザでの検証 実際にブラウザにて挙動を確認していく。  検証の結果、
class属性'foo'を持つ要素をコンソールへ出力することができた。
##5. おわりに
次項:JavaScript DOM操作⑥ 「ノードの追加」に続く。