.childNodes

https://developer.mozilla.org/en-US/docs/Web/API/Node.childNodes

要素の子ノードのコレクションを返します。

文法

var ndList = elementNodeReference.childNodes;

ndListには、要素の子ノードのオブジェクトの順序付けられたコレクションです。もし、要素が子ノードを持たない場合、ndListはノードを何も含みません。

ndListは、childNodesのノードリストを格納します。このようなリストはNodeListタイプになります。 childNodesは読み取り専用です。

例

// pargは、<p>要素を参照しているオブジェクト
if ( parg.hasChildNodes() ) {
  // まずは、オブジェクトが空では無いか、子ノードを持っているか確認
  var children = parg.childNodes;

  for (var i = 0; i < children.length; i++) {
    // children[i]で、それぞれの子ノードに対して何かの処理を行う
    // 注): 追加や削除を行うと、その変更がリストに影響します。
  }
}

// あるノードから全ての子ノードを削除する方法の1つ
// boxは子を含む要素への参照オブジェクトです。
while (box.firstChild) {
    // このリストは実稼働中であるため、
    // インデックスの再割り当てが行われます。
    box.removeChild(box.firstChild);
};

注意事項

ノードのコレクションの中身は、文字列ではなくオブジェクトです。ノードのオブジェクトのデータを取得するには、それらのプロパティを使用しなければいけません。 (例: elementNodeReference.childNodes[1].nodeNameとすると、名前を取得)

documentオブジェクト自身、Doctype定義とルート要素の2つの子を持ち、通常はdocumentElementとして参照されます。 ((X)HTMLドキュメントは、HTML要素です。)

仕様

デモ

実際に子ノードをループして出力してみると、改行をテキストノードとして取得してしまうようです。

<!DOCTYPE html>
<html>
<head>
  <style></style>
</head>
<body>
<ul id="nest-list">
  <li>1</li><li>2</li>
  <li>3</li>
  <li>
    <ul>
      <li>1.1</li>
      <li>1.2</li>
      <li>1.3</li>
    </ul>
  </li>
</ul>

<script>
  var parg = document.getElementById('nest-list')
  var children = parg.childNodes;
  for (var i = 0; i < children.length; i++) {
    document.write(children[i].nodeName + '、');
  }
</script>
</body>
</html>

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

特定のブラウザに特化しすぎている情報やあまりにも古い情報、または試験的に導入されているようなAPIや機能については、省略していることがあります。
例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。

.childNodes

文法

例

注意事項

仕様

関連項目

デモ