HTML DOM Document getElementsByClassName() メソッド

定義と使用方法

getElementsByClassName() 指定されたクラス名を持つ要素の集合を返します。

getElementsByClassName() メソッドは HTMLCollection。

getElementsByClassName() 属性は読み取り専用です。

HTMLCollection

HTMLCollection HTML要素の配列に似た集合（リスト）です。

インデックスを使用して集合内の要素にアクセスできます（0から始まります）。

length 属性は集合内の要素の数を返します。

もっと詳しくは：

getElementById() メソッド

getElementsByTagName() メソッド

querySelector() メソッド

querySelectorAll() メソッド

HTMLCollection オブジェクト

例

例1

class="example"を持つすべての要素を取得します：

const collection = document.getElementsByClassName("example");

実際に試してみてください

例2

「example」および「color」クラスを持つすべての要素を取得します：

const collection = document.getElementsByClassName("example color");

実際に試してみてください

例 3

class="example"の要素の数：

let numb = document.getElementsByClassName("example").length;

実際に試してみてください

例 4

class="example"のすべての要素の背景色を変更します：

const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

実際に試してみてください

文法

document.getElementsByClassName("example")classname)

パラメータ

パラメータ 説明
classname

必須。要素のクラス名。

スペースで区切られた複数のクラス名を検索可能です。例えば「test demo」。

返り値

タイプ 説明
オブジェクト

HTMLCollection オブジェクト。

指定されたクラス名を持つ要素の集合です。

ドキュメント内での出現順序に従って要素を並べ替えます。

ブラウザのサポート

document.getElementsByClassName() DOM レベル 1 (1998) の機能です。

すべてのブラウザがサポートしています：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート 9-11 サポート サポート サポート サポート

関連ページ

CSS 教程：CSS 语法

CSS リファレンスマニュアル：CSS .class セレクタ

HTML DOM リファレンスマニュアル：element.getElementsByClassName()

HTML DOM リファレンスマニュアル：className 属性

HTML DOM リファレンスマニュアル：classList 属性

HTML DOM リファレンスマニュアル：Style オブジェクト