HTML DOM children 属性

HTML DOM Element オブジェクト

children子属性は、指定された親要素のすべての子要素を含む活動的なHTMLCollectionを返します。

集合内の要素は、それらがソースコードで現れる順序で並べ替えられます。

集合内の各子要素にインデックス番号を使用してアクセスできます。インデックスは0から始まります。

length属性を使用して子要素の数を確認し、それですべての子要素を巡回できます。

注意：親要素に子要素がない場合、子要素は長さ0の空リストです。

この属性はchildNodes違いは、childNodesはすべてのノードを含んでおり、テキストノードやコメントノードも含まれますが、子ノードはただの要素ノードのみを含んでいます。

文法：

ParentElement.children

var list = document.body.children;

ブラウザの互換性

テーブルの数字は、children属性を完全にサポートする最初のブラウザバージョンを指定しています：

技術的詳細

更多实例

找出DIV要素有多少个子元素：

var len = document.querySelector("div").children.length;

DIV要素の第二个子要素（インデックス1）の背景色：

var parent = document.querySelector("div");
var list = parent.children;
list[1].style.backgroundColor = "coral";

DIV要素の最初の子要素（インデックス0）のテキストを変更：

var parent = document.querySelector("div");
var list = parent.children;
list[0].innerHTML = "HELLO WORLD";

HTML DOM Element オブジェクト