2025/01/03 (更新日:2025/01/08)

【JavaScript】「Element.children」の使い方！【子要素を取得】

Categories > JavaScriptの入門編

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事では「JavaScript」の「Element.children」の使い方を解説します！

この記事の内容！

「Element.children」を使うと何ができるのか？
「Element.children」の使い方！

また、下の動画でも「element.children」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「Element.children」を使うと何ができるのか？

「Element.children」を使うと、指定した要素の「直接の子要素」を取得することができます。

「JavaScript」から「子要素」にスタイルやクラスをつけたい場合などに使うことができますね。

また、「HTMLCollection」という「配列のようなもの」として子要素が返ってきます。

「HTMLCollection」では「forEach」は使えませんが、添え字を使って「child[1]」のような形でアクセスすることができます。

「Element.children」の使い方！

<div class="container">

  <div id="parent">
    <p>1番目の子</p>
    <p>2番目の子</p>
    <span>3番目の子</span>
  </div>
  
</div>

.container {
    width: 700px;
    margin: 130px auto;
    font-size: 40px;
}

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

console.log(children); // HTMLCollection の内容を表示

// 個別の要素を取得
for (let i = 0; i < children.length; i++) {
    console.log(children[i]); // 直接の子要素を表示
}

このように「Element.children」は使うことができます。

配列のように「0から振られるインデックス番号」があるので、「children[i]」みたいな感じで、個別の要素にアクセスすることができます。

なのでそれを利用して、「for()文」などを使うことができますね。

ですが、「Element.children」で返ってくるのは「HTMLCollection」であって、配列ではないので、「forEach」などは使えない点に注意しましょう。

「HTMLCollection」は厳密には配列じゃない

「Element.children」で返ってくる「HTMLCollection」は厳密には配列じゃないので、配列にできる操作が全て行える訳ではありません。

ただ、「０」から始まるインデックス番号が振られているので、「children[i]」のように書くことで配列のように個別の要素を取り出せるのですが、「forEach」などは使えないので注意してください。

配列のように扱いたいならシャロ―コピーを作成すればOK！

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

const childrenArray = Array.from(parentElement.children);
childrenArray.forEach(child => console.log(child));

「Array.from」を使うと、「配列風のもの」から「配列」を作ることができます。

そうすることで、配列として扱うことができるので、「forEach」が使えます。