最新のWeb開発のチュートリアル
 

HTML DOM getElementsByClassName() Method

<ドキュメントオブジェクト

例

指定されたクラス名を持つすべての要素を取得します。

var x = document.getElementsByClassName("example");
»それを自分で試してみてください

もっと"Try it Yourself"以下の例。

定義と使用法

getElementsByClassName()メソッドは、オブジェクトのNodeListとして、指定されたクラス名を使用して文書内のすべての要素のコレクションを返します。

NodeListオブジェクトは、ノードの集合を表します。 ノードは、インデックス番号によってアクセスすることができます。 インデックスは0から始まります。

ヒント：あなたが使用することができ、長さ 、あなたはすべての要素をループして、必要な情報を抽出することができ、指定したクラス名を要素の数を決定するためにNodeListオブジェクトのプロパティを。

ブラウザのサポート

表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。

方法
getElementsByClassName() 4.0 9.0 3.0 3.1 9.5

構文

document.getElementsByClassName( classname )

パラメータ値

パラメーター タイプ 説明
classname String 必須。 あなたが取得したい要素のクラス名。

複数のクラス名を検索するには、のようなスペース、で区切り"test demo" 。

技術的な詳細

DOMバージョン： コアレベル1のドキュメントオブジェクト
戻り値： 指定されたクラス名を持つ要素のコレクションを表すNodeListオブジェクト、。 彼らはソースコードに表示される返されたコレクション内の要素がソートされています。
例

その他の例

例

両方を持つすべての要素を取得"example"と"color"のクラスを：

var x = document.getElementsByClassName("example color");
»それを自分で試してみてください

例

クラス=「例」とどのように多くの要素を見つける（NodeListオブジェクトのlengthプロパティを使用して）文書にあります。

var x = document.getElementsByClassName("example").length;
»それを自分で試してみてください

例

クラス=「例」を持つすべての要素の背景色を変更します。

var x = document.getElementsByClassName("example");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
»それを自分で試してみてください

関連ページ

CSSチュートリアル： CSSセレクタ

CSSリファレンス： CSS の.classセレクター

HTML DOMリファレンス： 要素 。 getElementsByClassName()

HTML DOMリファレンス： className Property

HTML DOMリファレンス： classList Property

HTML DOMリファレンス： スタイルオブジェクト

<ドキュメントオブジェクト