HTML DOM Element getElementsByClassName()メソッド
- 前のページ getBoundingClientRect()
- 次のページ getElementsByTagName()
- 上一层に戻る HTML DOM Elements オブジェクト
定義と使用法
getElementsByClassName() メソッドは指定されたクラス名を持つ子要素のコレクションをNodeListオブジェクトとして返します。
も参照してください：
チュートリアル：
NodeList
NodeList 配列に似たノードコレクション（リスト）です。
インデックス（インデックス）を使用してリスト内のノードにアクセスできます。インデックスは0から始まります。
length属性リスト内のノード数を返します。
インスタンス
例1
class="child"を使用して最初のリスト項目のテキストを変更します：
const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
例2
"myDIV"内のclass="child"の要素数：
const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;
例3
class="child"の二番目の要素のサイズを変更します：
const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";
例 4
class="example" の二つ目の要素で「child」と「color」クラスを使用して一つ目の要素のサイズを変更します：
const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";
例 5
class="child" の「myDIV」内のすべての要素の色を変更します：
const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
nodes[i].style.color = "red";
}
構文
element.getElementsByClassName(classname)
パラメータ
| パラメータ | 説明 |
|---|---|
| classname |
必須。子要素のクラス名。 複数の名前をスペースで区切って指定します（例えば "child color"）。 |
返り値
| タイプ | 説明 |
|---|---|
| NodeList |
指定されたクラス名を持つ要素の子要素を含みます。 要素はソースコード内での出現順序に従ってソートされます。 |
ブラウザのサポート
element.getElementsByClassName() DOM Level 1 (1998) の機能です。
すべてのブラウザで完全にサポートされています：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| サポート | 9-11 | サポート | サポート | サポート | サポート |
- 前のページ getBoundingClientRect()
- 次のページ getElementsByTagName()
- 上一层に戻る HTML DOM Elements オブジェクト
