HTMLDOM要素の子
要素オブジェクト例
<body>要素の子のコレクションを取得します。
const collection = document.body.children;
以下のその他の例。
定義と使用法
children
プロパティは、要素の子要素のコレクションを返します。
プロパティはchildren
HTMLCollectionオブジェクトを返します。
違い
プロパティは、テキストノードとコメントノードを含むchildNodes
すべての子ノードを返しますが、プロパティは子要素children
のみを返します。
関連項目:
HTMLCollection
HTMLCollectionは、HTMLノードのコレクションです。
コレクション内のノードには、インデックス番号でアクセスできます。インデックスは0から始まります。
lengthプロパティは、コレクション内の要素の数を返します。
構文
element.children
戻り値
タイプ | 説明 |
物体 | HTMLCollectionオブジェクト。 要素ノードのコレクション。 要素は、ドキュメントに表示されるとおりに並べ替えられます。 |
その他の例
<div>要素に含まれる子の数を調べます。
var c =
document.getElementById("myDIV").children.length;
<div>要素の2番目の子要素の背景色を変更します。
var c = document.getElementById("myDIV").children;
c[1].style.backgroundColor = "yellow";
<select>要素の3番目の子要素(インデックス2)のテキストを取得します。
var c = document.getElementById("mySelect").children[2].text;
<body>のすべての子をループして、背景色を赤に変更します。
var c = document.body.children;
var i;
for (i = 0; i < c.length; i++) {
c[i].style.backgroundColor = "red";
}
関連ページ
HTML DOMリファレンス:childNodesプロパティ
ブラウザのサポート
element.children
DOMレベル1(1998)の機能です。
すべてのブラウザで完全にサポートされています。
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |
要素オブジェクト