JavaScriptにおけるchildrenとchildNodesの違い

childrenプロパティは、要素の直接的な子要素のみを返します。つまり、要素の子要素のうち、テキストノードやコメントノードなどの非要素ノードは含まれません。以下はchildrenプロパティの使い方の例です。

const parentElement = document.getElementById('parent');
const childElements = parentElement.children;
for (let i = 0; i < childElements.length; i++) {
  console.log(childElements[i]);
}

上記の例では、idが「parent」という要素の直接的な子要素を取得し、それぞれの子要素をコンソールに出力しています。

一方、childNodesプロパティは、要素のすべての子ノードを返します。これにはテキストノードやコメントノードなどの非要素ノードも含まれます。以下はchildNodesプロパティの使い方の例です。

const parentElement = document.getElementById('parent');
const childNodes = parentElement.childNodes;
for (let i = 0; i < childNodes.length; i++) {
  console.log(childNodes[i]);
}

上記の例では、idが「parent」という要素のすべての子ノードを取得し、それぞれの子ノードをコンソールに出力しています。

このように、childrenプロパティは要素の直接的な子要素のみを返し、非要素ノードを含みません。一方、childNodesプロパティは要素のすべての子ノードを返し、非要素ノードも含みます。

これらのプロパティを使うことで、JavaScriptで要素の子要素を操作する際に適切なプロパティを選択することができます。