JavaScriptでクラス名を取得する:getElementsByClassName()

getElementsByClassName()とは?

getElementByClassName('取得したいクラス名')は()内に記述したクラス名(引数)を持つすべての要素を取得するメソッドです。取得できるのはHTMLcollectionと言われる配列に似た構造のデータです。要素がない場合は空のHTMLcollectionが返ってきます。

サンプルコード

要素をいくつか用意し、getElementsByClassName()メソッドを使ったらどのような値が返ってくるか実際に確認してみましょう。

HTML

JavaScript

1行目の、document.getElementsByClassName();というメソッドでドキュメント内にある指定の要素を取得することができます。引数に指定したクラス名class2というクラスがついたli要素が返ってきたのが確認することができました。引数に指定したclass名の要素がドキュメント内にない場合は、空のHTMLcollectionが返ってきます。

複数のクラス名の要素を取得したい場合

先ほどのHTMLでclass名がclass1と、class2の2つが指定されている要素を取得するメソッドを実行してみましょう。

class名にclass1とclass2の両方が指定されている要素を取得することができました。複数のclass名が指定されているものを取得したい場合は、('')内にスペースで区切って追加していきます。書き方は以下のようになります。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

イベント