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

HTML DOM children Propery

<Elementオブジェクト

例

コレクションを取得<body>要素の子を：

var c = document.body.children;
»それを自分で試してみてください

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

定義と使用法

子供プロパティはHTMLCollectionオブジェクトとして、要素の子要素のコレクションを返します。

コレクションの要素は、それらがソースコードに表示されるようにソートされ、インデックス番号によってアクセスすることができます。 インデックスは0から始まります。

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

このプロパティとの間の差のchildNodesは 、子どもたちが要素ノードのみが含まれている間のchildNodesは、テキストノード、コメントノードを含むすべてのノードを、含んでいることです。

ブラウザのサポート

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

プロパティ
children 2.0 9.0 * 3.5 4.0 10.0

*注：子供プロパティは完全にIE8にIE6でサポートされています。 しかし、これらのバージョンでは、要素ノード、コメント・ノードを返します。 IE9 +は、要素ノードを返します。

構文

element .children

技術的な詳細

戻り値： 要素ノードのコレクションを表すライブHTMLCollectionオブジェクト。 彼らはソースコードに表示される返されたコレクション内の要素がソートされています
DOMバージョン コアレベル1要素オブジェクト
例

その他の例

例

Aどのように多くの子供たちを見つける<div>要素があります。

var c = document.getElementById("myDIV").children.length;

Cの結果は次のようになります。

2
»それを自分で試してみてください

例

2番目の子要素の背景色の変更<div>要素を：

var c = document.getElementById("myDIV").children;
c[1].style.backgroundColor = "yellow";
»それを自分で試してみてください

例

3番目の子要素のテキストを取得します(index 2)の<select>要素：

var c = document.getElementById("mySelect").children[2].text;

Cの結果は次のようになります。

Saab
»それを自分で試してみてください

例

すべての子をループ<body>と赤に彼らの背景色を変更します。

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

関連ページ

HTML DOMリファレンス： childNodes Property

<Elementオブジェクト