JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで親要素の子要素を取得する方法【サンプルコード付き】

JavaScriptでは、親要素が持つchildrenプロパティを参照することで、その直下にある子要素をまとめて取得できます。本記事では、実際に動作するサンプルコードを使いながら、具体的な手順をわかりやすく解説します。

サンプルコード

以下は、JavaScriptを使って親要素（parent1）の子要素を取得し、ボタンのクリックで一括表示させる例です。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .child1,
    .child2,
    .child3 {
        display: none;
        margin: 10px;
        width: 70px;
        height: 70px;
    }
    .child1 {
        background-color: red;
    }
    .child2 {
        background-color: pink;
    }
    .child3 {
        background-color: blue;
    }
</style>
</head>
<body>
<h1>Get the child element of a parent using JavaScript</h1>
<div class="parent1">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
<div class="child3">Child 3</div>
</div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to see the parent1 child elements</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let parentEle = document.querySelector(".parent1");
    BtnEle.addEventListener("click", (event) => {
        Array.from(parentEle.children).forEach((item) => {
            item.style.display = "inline-block";
        });
    });
</script>
</body>
</html>

コードの解説

  • 要素の取得：document.querySelector()を使って、クリック対象のボタン（.Btn）と親要素（.parent1）への参照をそれぞれ変数に格納しています。
  • 子要素の取得：parentEle.childrenプロパティは、親要素の直下にあるすべての子要素をHTMLCollectionとして返します。このコレクションはそのままでは配列メソッドが使えないため、Array.from()で配列に変換しています。
  • 一括操作：forEach()で各子要素を順番に処理し、style.displayをinline-blockに変更することで、CSSで非表示（display: none）に設定されていた子要素をまとめて表示させています。

実行結果

ページを読み込んだ直後は、子要素にdisplay: none;が適用されているため、赤・ピンク・青のボックスは画面に表示されません。

JavaScriptで親要素の子要素を取得する方法【サンプルコード付き】

「CLICK HERE」ボタンをクリックすると、親要素（parent1）のすべての子要素が横並びで表示されます。

JavaScriptで親要素の子要素を取得する方法【サンプルコード付き】

  1. JavaScriptで親要素にCSSクラスを適用・継承する方法をわかりやすく解説

    JavaScriptを使って新しく作成した要素にCSSのスタイル（クラス）を適用したい場合、document.createElement()、classList.add()、そしてappend()を組み合わせることで簡単に実現できます。 基本的な仕組み 処理の流れは以下の3ステップです。 1. document.createElement()： 新しいdiv要素などのHTML要素を動的に生成します。 2. classList.add()： 生成した要素に対して、あらかじめ定義しておいたCSSクラス（.classセレクタ）を追加します。これにより、そのクラスに設定されたスタイルが継承・適用されま

  2. JavaScriptでh1のinnerTextを取得する方法｜子要素のテキストを除外する

    h1タグ内に子要素（spanなど）が含まれている場合、単純にinnerTextを取得すると子要素のテキストまで一緒に取られてしまいます。h1直下のテキストのみを取得したい場合は、childNodesとtextContentを組み合わせることで実現できます。 childNodes[0].textContent; 仕組みの解説 querySelector()で取得したh1要素に対してchildNodesを使うと、その子ノードの一覧（NodeList）が返されます。[0]で最初の子ノード、つまりh1直下のテキストノードにアクセスし、そこからtextContentを取得することで、子要素内のテキストを