HTML DOMドキュメントgetElementsByClassName（）
例
class = "example"ですべての要素を取得します：
const collection = document.getElementsByClassName("example");
「example」クラスと「color」クラスの両方を持つすべての要素を取得します。
const collection = document.getElementsByClassName("example color");
以下のその他の例。
定義と使用法
このgetElementsByClassName()メソッドは、指定されたクラス名を持つ要素のコレクションを返します。
このgetElementsByClassName()メソッドはHTMLCollectionを返します。
getElementsByClassName()プロパティは読み取り専用です。
HTMLCollection
HTMLCollectionは、HTMLノードのコレクションです。
コレクション内のノードには、インデックス番号でアクセスできます。インデックスは0から始まります。
lengthプロパティは、コレクション内の要素の数を返します。
構文
document.getElementsByClassName(classname)
パラメーター
| Parameter | Description |
| classname | Required. The class name of the elements. Search for multiple class names separated by spaces like "test demo". |
戻り値
| タイプ | 説明 |
| 物体。 | HTMLCollectionオブジェクト。 指定されたクラス名を持つ要素のコレクション。 要素は、ドキュメントに表示されるとおりに並べ替えられます。 |
その他の例
class = "example"の要素の数：
let numb = document.getElementsByClassName("example").length;
class = "example"を使用して、すべての要素の背景色を変更します。
const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
関連ページ
CSSチュートリアル：CSS構文
CSSリファレンス：CSS .class Selector
HTML DOMリファレンス：element .getElementsByClassName（）
HTML DOMリファレンス：classNameプロパティ
HTML DOMリファレンス：classListプロパティ
HTML DOMリファレンス：スタイルオブジェクト
ブラウザのサポート
document.getElementsByClassName() DOMレベル1（1998）の機能です。
すべてのブラウザで完全にサポートされています。
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |