JavaScript DOM操作⑤ 「class属性をキーに要素を取得」 #JavaScript

1. はじめに

本記事では、JavaScript DOM操作の
「class属性をキーに要素を取得」
について記載する。

2. getElementsByClassName

役割

指定したclass属性を持つ要素を取得するメソッド

3. どうやって書くの？

構文は以下のようになる。

index.js

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

※()内のnameは、class属性の値を指す。

4. 例題

内容

ボタンをクリックしたら、class名が'foo'の要素を取得し、その内容をコンソールに出力する。

実践前のチュートリアル

実践に入る前に、完成形を先に表示しておく。

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

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

マークアップ

ブラウザにテキストボックスやボタンを表示しないといけないので、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タグ内の記述に関しては、こちらにて詳細説明済

マークアップしブラウザで表示すると以下のようになる。

JavaScriptの記述

次にJavaScriptを仕上げていく。

getElementsByClassNameの処理

index.js

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

上記構文に関して、順を追って解説していく。

function showElements()

HTML内のinputタグにあるonclick属性のshowElementsで関数を作成していく。

let elements = document.getElementsByClassName('foo');

elememtsという変数を定義し、getElementsByClassNameでHTML内のclass属性である'foo'をキーに要素を取得する。

for (let i = 0; i < elements.length; i++)

forを使う理由として、HTML内の要素を取得するために繰り返し処理を実行する必要があるため。

console.log(elements[i].innerText);

コンソールへ出力する際、forで定義した変数iを配列として記述し、innerTextと結合させることによってタグ内の要素を出力することができる。

ブラウザでの検証

実際にブラウザにて挙動を確認していく。

検証の結果、

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

5. おわりに

次項:JavaScript DOM操作⑥ 「ノードの追加」に続く。