HTML DOM getElementsByClassName（）メソッド

❮要素オブジェクト

例

class = "example"のリストで、class = "child"（インデックス0）の最初のリストアイテムのテキストを変更します。

var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

getElementsByClassName（）メソッドは、指定されたクラス名を持つ要素の子要素のコレクションをNodeListオブジェクトとして返します。

NodeListオブジェクトは、ノードのコレクションを表します。ノードにはインデックス番号でアクセスできます。インデックスは0から始まります。

ヒント： NodeListオブジェクトのlengthプロパティを使用して、指定したクラス名を持つ子ノードの数を決定できます。次に、すべてのノードをループして、必要な情報を抽出できます。

ブラウザのサポート

表の数字は、このメソッドを完全にサポートする最初のブラウザバージョンを示しています。

Method
getElementsByClassName()	4.0	9.0	3.0	3.1	9.5

構文

element.getElementsByClassName(classname)

パラメータ値

Parameter	Type	Description
classname	String	Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color".

技術的な詳細

DOMバージョン：	コアレベル1要素オブジェクト
戻り値：	指定されたクラス名を持つ要素の子要素のコレクションを表すNodeListオブジェクト。返されたコレクションの要素は、ソースコードに表示されるとおりに並べ替えられます。

その他の例

例

<div>要素内のclass = "child"で2番目の要素の背景色を変更します。

var x = document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";

例

<div>要素内にclass = "child"を持つ要素がいくつあるかを調べます（NodeListオブジェクトのlengthプロパティを使用）。

var x = document.getElementById("myDIV").getElementsByClassName("child").length;

例

class = "example"を使用して、要素内の「child」クラスと「color」クラスの両方を使用して、最初の要素の背景色を変更します。

var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";

例

<div>要素内のclass = "child"ですべての要素の背景色を変更します。

var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}

JS Reference

JavaScript

Window

HTML DOM

Web APIs

HTML Objects

Other References