JavaScript子要素取得の5つの方法と使い分け完全ガイド

こんにちは、とまだです。

JavaScriptで子要素を取得しようとして、こんな悩みを抱えていませんか？

「childrenとchildNodesの違いがわからない」 「どのメソッドを使えばいいか迷ってしまう」 「エラーが出て、思うように動かない」

今回は現役のエンジニア、そして元プログラミングスクール講師としての経験から、JavaScript子要素取得の方法を体系的に解説します。

JavaScriptの子要素取得とは

JavaScriptで子要素を取得するというのは、親要素の中にある要素を取得することです。

HTMLは階層構造になっています。 親要素の下に子要素があり、その関係を利用して要素を取得します。

<div id="parent">
  <p>長男</p>
  <p>次男</p>
  <span>長女</span>
</div>

この例では、divが親要素です。 pタグやspanタグが子要素になります。

JavaScriptでは、親要素から子要素を探すことができます。 これが子要素の取得です。

なぜ子要素の取得が必要なのか

動的なWebページを作るには、子要素の取得が欠かせません。

たとえば、ToDoリストを考えてみましょう。

<ul id="todo-list">
  <li>買い物に行く</li>
  <li>宿題をする</li>
  <li>運動する</li>
</ul>

新しいタスクを追加する処理を実装するとします。 リストの中の子要素を操作する必要がありますね。

つまり、インタラクティブな機能には子要素取得が必須なのです。

子要素を取得する5つの方法

JavaScriptで子要素を取得する主な方法は5つあります。

それぞれの特徴を見ていきましょう。

1. children プロパティ

childrenは、HTML要素だけを取得するプロパティです。

const parent = document.getElementById('parent');
const children = parent.children;

// 子要素の数を確認
console.log(children.length); // 3

// 最初の子要素を取得
console.log(children[0]); // <p>長男</p>

childrenの特徴は、テキストノードや改行を無視することです。 純粋にHTML要素だけを扱いたいときに便利です。

2. childNodes プロパティ

childNodesは、すべてのノードを取得します。

const parent = document.getElementById('parent');
const nodes = parent.childNodes;

// ノードの数（改行も含む）
console.log(nodes.length); // 7（要素3つ + 改行4つ）

HTML要素だけでなく、テキストや改行も含まれます。 そのため、扱いが少し難しくなります。

ですが、テキストノードを操作したいときには必要です。

3. querySelector / querySelectorAll

特定の条件で子要素を取得したいときは、querySelectorが便利です。

const parent = document.getElementById('parent');

// 最初のpタグだけを取得
const firstP = parent.querySelector('p');
console.log(firstP); // <p>長男</p>

// すべてのpタグを取得
const allP = parent.querySelectorAll('p');
console.log(allP.length); // 2

CSSセレクタを使えるので、複雑な条件でも簡単に指定できます。

4. firstElementChild / lastElementChild

最初や最後の子要素だけが欲しいときは、専用のプロパティがあります。

const parent = document.getElementById('parent');

// 最初の子要素
console.log(parent.firstElementChild); // <p>長男</p>

// 最後の子要素
console.log(parent.lastElementChild); // <span>長女</span>

firstChildやlastChildもありますが、こちらはテキストノードも含みます。 注意が必要です。

5. getElementsBy系メソッド

タグ名で子要素を取得することもできます。

const parent = document.getElementById('parent');

// すべてのpタグを取得
const pTags = parent.getElementsByTagName('p');
console.log(pTags.length); // 2

このメソッドは子孫要素すべてを対象にします。 直接の子要素だけが欲しい場合は注意が必要です。

childrenとchildNodesの違い

初心者が最も混乱するのが、childrenとchildNodesの違いです。

この違いをシンプルに説明します。

具体例で理解する

<div id="family">
  お父さん
  <p>太郎</p>
  <p>花子</p>
  お母さん
</div>

この場合の違いを見てみましょう。

childrenでは、<p>太郎</p>と<p>花子</p>だけ取得されます。 childNodesでは、「お父さん」「太郎」「花子」「お母さん」すべて取得されます。

どちらを使うべきか

ほとんどの場合、childrenを使うのがおすすめです。

なぜなら、HTML要素だけを扱いたいケースが多いからです。

childNodesは、テキストを直接操作したい特殊なケースで使います。

実践的な使用例

実際のWeb開発でよく使うパターンを見ていきましょう。

ToDoリストの項目を全削除

const todoList = document.getElementById('todo-list');

// すべての子要素を削除
while (todoList.firstChild) {
  todoList.removeChild(todoList.firstChild);
}

whileループを使って、子要素がなくなるまで削除を繰り返します。

特定のクラスを持つ子要素だけ処理

const container = document.getElementById('container');
const activeItems = container.querySelectorAll('.active');

// activeクラスを持つ要素だけ色を変える
activeItems.forEach(item => {
  item.style.backgroundColor = 'yellow';
});

querySelectorAllとクラスセレクタを組み合わせます。 条件に合う要素だけを簡単に取得できます。

子要素の順番を入れ替える

const list = document.getElementById('list');
const items = Array.from(list.children);

// 逆順に並べ替え
items.reverse().forEach(item => {
  list.appendChild(item);
});

Array.from()で配列に変換してから操作するのがポイントです。

つまずきやすいポイントと解決法

HTMLCollectionは配列ではない

childrenで取得した結果は、配列のように見えます。 ですが、実はHTMLCollectionという特殊なオブジェクトです。

// ❌ エラーになる
parent.children.forEach(child => {
  console.log(child);
});

// ⭕ 配列に変換してから使う
Array.from(parent.children).forEach(child => {
  console.log(child);
});

Array.from()で配列に変換するか、普通のforループを使いましょう。

動的に変化するコレクション

getElementsBy系のメソッドは、ライブコレクションを返します。

const pTags = parent.getElementsByTagName('p');
console.log(pTags.length); // 2

// 新しいpタグを追加
const newP = document.createElement('p');
parent.appendChild(newP);

// 自動的に更新される
console.log(pTags.length); // 3

一方、querySelectorAllは静的なコレクションです。 後から追加しても変わりません。

空白や改行の扱い

HTMLの改行や空白も、childNodesでは1つのノードとして扱われます。

// 改行を無視したい場合
const elements = Array.from(parent.childNodes)
  .filter(node => node.nodeType === 1); // 要素ノードのみ

nodeType === 1で要素ノードだけをフィルタリングできます。

まとめ

JavaScript子要素取得の基本をマスターできました。

重要なポイントをまとめます。

基本の使い分け：

• 迷ったらchildrenを使う
• 条件があるならquerySelectorを使う
• 最初・最後なら専用プロパティを使う
• childNodesは特殊な場合のみ

最初はchildrenだけ覚えておけば十分です。 慣れてきたら他の方法も使い分けていきましょう。

子要素取得ができるようになると、動的なWebページが作れます。 ボタンクリックで要素を追加したり、削除したりできるようになります。

本格的にJavaScriptを学びたい方は、Learning Nextをご覧ください。 基礎から実践まで、順序立てて学習できるカリキュラムを用意しています。