子要素の取得の基本 — el.children
el.children は「直下の子要素だけ」を順番付きで返します。返り値は配列“風”の HTMLCollection（ライブコレクション）で、テキストノードやコメントは含みません。
基本の使い方
<ul id="list">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<script>
const ul = document.getElementById("list");
console.log(ul.children.length); // 3
console.log(ul.children[0].textContent); // "A"
</script>
- 対象: 直下の子「要素」だけ（テキスト・コメントは除外）。
- 型:
HTMLCollection（ライブ）。lengthや添字アクセスができる。
よく使うテンプレート集
子要素をループして処理
const parent = document.querySelector(".items");
for (let i = 0; i < parent.children.length; i++) {
const child = parent.children[i];
child.classList.toggle("even", i % 2 === 0);
}
- ラベル: 交互にクラスを付けるなどの整形に便利。
配列として扱いたい（map/filterを使う）
const arr = Array.from(parent.children); // または [...parent.children]
const texts = arr.map(el => el.textContent.trim());
- ラベル:
HTMLCollectionは配列メソッドが使えないので、配列に変換して使う。
最初・最後の子へアクセス（近道）
const first = parent.firstElementChild;
const last = parent.lastElementChild;
- ラベル:
children[0]と同義だが、読みやすい。
子を追加・削除しても即反映（ライブ）
const list = document.querySelector("#list");
console.log(list.children.length); // 0
const li = document.createElement("li");
li.textContent = "NEW";
list.appendChild(li);
console.log(list.children.length); // 1 （ライブなので増える）
- ラベル: その場でDOMが変わると
childrenの内容も変わる。
childNodes との違い
- children: 要素ノードのみ。使いやすい。
- childNodes: テキスト・コメントも含むすべての子ノード。意図せず改行テキストを拾ってしまうことがある。
parent.children; // <li>, <div> など“要素だけ”
parent.childNodes; // テキストやコメントも含む（注意）
実務でのコツ
- ライブであることを意識: ループ中に子を追加・削除すると、インデックスがズレる。操作は先に配列へコピーしてから行うと安全。
- 要素だけ扱いたいなら children: 改行や空白テキストに悩むなら
childNodesではなくchildrenを使う。 - 空検査:
if (parent.children.length === 0) { /* 空 */ }のように簡単にチェックできる。 - 選択が複雑なら querySelectorAll: 条件で絞りたい場合は
parent.querySelectorAll(':scope > .item')なども有効。
ありがちなハマりポイントと対策
- forEachが使えない:
- 対策:
Array.from(el.children).forEach(...)に変換。
- 対策:
- 改行テキストを拾ってしまう（childNodes使用時）:
- 対策: 要素だけなら
children、またはnodeType === 1でフィルタ。
- 対策: 要素だけなら
- 動的操作でループが崩れる:
- 対策: 先にスナップショット（配列化）してから変更する。
練習問題（手を動かして覚える）
<ul id="list">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
<script>
const list = document.getElementById("list");
// 1) 子要素の数と最初/最後を表示
console.log("count:", list.children.length);
console.log("first:", list.firstElementChild.textContent);
console.log("last:", list.lastElementChild.textContent);
// 2) すべての子に連番を付ける
Array.from(list.children).forEach((li, i) => {
li.textContent = `${i + 1}. ${li.textContent}`;
});
// 3) 偶数番だけ非表示
Array.from(list.children).forEach((li, i) => {
if ((i + 1) % 2 === 0) li.style.display = "none";
});
</script>
直感的な指針
- 「直下の要素だけ」を取りたいなら
children。 - 配列のように使うなら
Array.from(children)にしてから整形。 - 動的に増減する前提なら、ライブ性に注意してスナップショットして操作する。