children

チルドレン（DOM操作）

意味全子要素の取得

childrenとは？

childrenプロパティは、現在の要素の子要素のリストを返します。

childrenの具体的な使い方

親要素の全ての子要素を取得し表示する例

<div id="parent">
  <p>第1段落</p>
  <p>第2段落</p>
  <p>第3段落</p>
</div>
<button onclick="showChildren()">子要素を表示</button>

<script>
function showChildren() {
  const parentElement = document.getElementById('parent');
  const children = parentElement.children;
  let childrenInfo = '';
  for (let i = 0; i < children.length; i++) {
    childrenInfo += `子要素${i + 1}: ${children[i].tagName}\n`;
    children[i].style.backgroundColor = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
  }
  alert(`親要素の子要素:\n${childrenInfo}\n子要素の背景色がランダムに変更されました。`);
}
</script>

親要素（div要素）の全ての子要素（p要素）を取得し、それぞれのタグ名をアラートで表示します。また、各子要素の背景色をランダムに変更して視覚的に確認できるようにします。

childrenに関するよくある質問

Q. childrenとchildNodesの違いは？

A. childrenは要素ノードのみを含む HTMLCollection を返しますが、childNodesはテキストノードや注釈ノードを含むすべての子ノードを含む NodeList を返します。

Q. 子要素が存在しない場合は？

A. 子要素が存在しない場合、childrenは空の HTMLCollection を返します。長さが0の配列のように扱うことができます。

Q. childrenは配列ですか？

A. childrenは配列ではなく、HTMLCollectionオブジェクトです。配列のメソッドを使用するには、Array.from()やスプレッド構文[...element.children]を使って配列に変換する必要があります。

childrenが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのchildrenやtextContent、dataset、classList.add()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。