例
クラス=「子」と最初のリスト項目のテキストを変更します(index 0)クラス=「例」でリストに：
var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
テキストを変更する前に：
- Coffee
- Tea
テキストを変更後：
- Milk
- Tea
»それを自分で試してみてください もっと"Try it Yourself"以下の例。
定義と使用法
getElementsByClassName()メソッドは、NodeListオブジェクトとして、指定されたクラス名を持つ要素の子要素のコレクションを返します。
NodeListオブジェクトは、ノードの集合を表します。 ノードは、インデックス番号によってアクセスすることができます。 インデックスは0から始まります。
ヒント：あなたが使用することができ、長さ 、あなたは、すべてのノードをループして、必要な情報を抽出することができ、指定したクラス名と子ノードの数を決定するためにNodeListオブジェクトのプロパティを。
ブラウザのサポート
表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。
| 方法 | |||||
|---|---|---|---|---|---|
| getElementsByClassName() | 4.0 | 9.0 | 3.0 | 3.1 | 9.5 |
構文
element .getElementsByClassName( classname )パラメータ値
| パラメーター | タイプ | 説明 |
|---|---|---|
| classname | String | 必須。 あなたが取得したい子要素のクラス名。 複数のクラス名を検索するには、のようなスペース、で区切り"child color" 。 |
技術的な詳細
| DOMバージョン： | コアレベル1要素オブジェクト |
|---|---|
| 戻り値： | 指定されたクラス名で要素の子要素のコレクションを表すNodeListオブジェクト、。 彼らはソースコードに表示される返されたコレクション内の要素がソートされています。 |
その他の例
例
内部クラス=「子」と第二の要素の背景色を変更して<div>要素：
var x =
document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor
= "red"; »それを自分で試してみてください 例
クラス=「子」とどのように多くの要素を見つけるの内側にある<div> （NodeListオブジェクトのlengthプロパティを使用して）要素：
var x =
document.getElementById("myDIV").getElementsByClassName("child").length;xの結果は次のようになります。
3 »それを自分で試してみてください 例
両方の最初の要素の背景色を変更する"child"と"color"クラス=「例」の要素の内部クラス：
var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red"; »それを自分で試してみてください 例
内部クラス=「子」を持つすべての要素の背景色の変更<div>要素を：
var x = document.getElementById("myDIV");
var y =
x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++)
{
y[i].style.backgroundColor = "red";
} »それを自分で試してみてください 関連ページ
CSSチュートリアル： CSSセレクタ
CSSリファレンス： CSS の.classセレクター
HTML DOMリファレンス： ドキュメント。 getElementsByClassName()
HTML DOMリファレンス： className Property
HTML DOMリファレンス： classList Property
HTML DOMリファレンス： HTML DOMスタイルオブジェクト