【JavaScript入門】DOM操作で親要素や子要素・隣接要素など関連要素を取得する

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptのDOM操作で親要素や子要素・隣接要素など関連要素を取得する方法を解説していきます。

1 とあるHTML要素の関連要素の取得をする
2 SampleCode全文
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 Twitterやってます！Follow Me！
6 参考・引用
7 【おすすめ関連記事】
8 最近の投稿

とあるHTML要素の関連要素の取得をする

DOM操作では、取得したHTML要素の親要素を取得したり、子要素を取得したり、隣り合う兄弟要素を取得するなど、柔軟な関連要素の取得ができます。

それでは「親要素」の取得、「子要素」の取得、「兄弟要素」の取得を1つずつ確認していきましょう。

親要素の取得をする

とあるHTML要素(HTML-Element)の「親要素」を取得するには「 parentNode 」プロパティを使います。

構文: let parent = element.parentNode;

取得したHTML要素である elementの「親要素」を新たに取得しています。

<div class="robotama-parent">
    <h3 class="robotama">ただのロボ玉🔥</h3>
</div>


<script>
    // 1. class名「robotama」のHTML要素を取得
    const robotama = document.querySelector('.robotama');

    // 2. 取得した「robotama」の「親要素」(parentNode)を取得
    const parentElement = robotama.parentNode;

    console.log({parentElement});
        // {parentElement: div.robotama-parent}

</script>

子要素の取得をする

とあるHTML要素(HTML-Element)の子要素を取得するには「 children 」プロパティを使います。

構文: let children = element.children;

childrenプロパティで取得したデータは「HTMLCollection型のデータ」で子要素の複数の情報を持っています。

このHTMLCollection型は、配列のようなList形式の型です。

[] 演算子で各要素を取得したり、lengthでListの要素数を取得できるなど配列と同じような機能を備えています。


<div id="robotama-project">
    <h3 class="project">ロボ玉開発計画🔥</h3>

    <ol>
        <li>ロボ玉試作1号機🔥</li>
        <li>ロボ玉試作3号機🔥</li>
        <li>ロボ玉試作4号機🔥</li>
    </ol>

    <button type="button">ロボ玉🔥</button>
</div>

<script>
    // 1. id名「robotama-project」のHTML要素を取得
    const robotamaProject = document.getElementById('robotama-project');

    // 2. id名「robotama-project」の「子要素たち」(children)を取得
    const childrenElement = robotamaProject.children;

    console.log({childrenElement});
        // childrenElement: HTMLCollection(3) [h3.project, ol, button]

    let elemNum = 0;
    for (const elem of childrenElement) {
        elemNum ++;
        console.log({[elemNum]: elem});
            // {1: h3.project}
            // {2: ol}
            // {3: button}
    }

</script>

隣接要素の取得をする

とあるHTML要素(HTML-Element)の「隣接要素」(同階層のお隣さん)を取得してみましょう。

前隣の要素は「 previousElementSibling 」, 後に続く要素は「nextElementSibling」を使って取得できます。

前隣の要素・構文: let prevElement = element.previousElementSibling;

後に続く要素・構文: let nextElement = element.nextElementSibling;


<div class="robotama-parent">
    <h3 class="robotama">ただのロボ玉🔥</h3>
</div>

<h3 id="middle">中間にいるロボ玉🔥</h3>


<div id="robotama-project">
    <h3 class="project">ロボ玉開発計画🔥</h3>

    <ol>
        <li>ロボ玉試作1号機🔥</li>
        <li>ロボ玉試作3号機🔥</li>
        <li>ロボ玉試作4号機🔥</li>
    </ol>

    <button type="button">ロボ玉🔥</button>
</div>

<script>

    // 1. id名「middle」のHTML要素を取得
    const middleElement = document.getElementById('middle');
    console.log({middleElement});
        // {middleElement: h3#middle}

    // 2. id名「middle」の「前隣の要素」を取得
    const prevElement = middleElement.previousElementSibling;
    console.log({prevElement});
        // {prevElement: div.robotama-parent}

    // 3. id名「middle」の「後に続く要素」を取得
    const nextElement = middleElement.nextElementSibling;
    console.log({nextElement});
        // {nextElement: div#robotama-project}


</script>

SampleCode全文

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM-RelatedElement-Test🔥</title>
</head>
<body>
    <h1>DOM-RelatedElement-Testをするロボ玉🔥</h1>

    <h2>関連要素の取得</h2>
    <p>あるHTML要素に関連するHTML要素を取得する方法</p>
    <p>親から子を取得して、子の隣接要素を取得して、さらにその子要素を取得するなどもできる</p>

    <h2>1. 親要素</h2>
    <p>とあるHTML要素(HTML-Element)の親要素を取得するには「 parentNode 」プロパティを使います。</p>
    <p>構文: let parent = element.parentNode;</p>
    <p>elementが取得済みのHTML要素で、その親要素を新たに取得しています。</p>

    <h2>2. 子要素</h2>
    <p>とあるHTML要素(HTML-Element)の子要素を取得するには「 children 」プロパティを使います。</p>
    <p>構文: let children = element.children;</p>
    <p>childrenプロパティは、HTMLCollection型で、子要素の複数の情報を持っています。
        <br>
        このHTMLCollection型は、配列のようなList形式の型です。
    </p>
    <p>[]演算子で各要素を取得したり、lengthでListの要素数を取得できるなど配列と同じような機能を備えています。</p>
    

    <h2>3. 隣接要素</h2>
    <p>とあるHTML要素(HTML-Element)の「隣接要素」(同階層のお隣さん)を取得してみましょう。</p>
    <p>前隣の要素は「 previousElementSibling 」, 後に続く要素は「nextElementSibling」を使って取得できます。</p>
    <p>前隣の要素・構文: let prevElement = element.previousElementSibling;</p>
    <p>後に続く要素・構文: let nextElement = element.nextElementSibling;</p>

    <h2>DOM-RelatedElement-操作🔥</h2>


<div class="robotama-parent">
    <h3 class="robotama">ただのロボ玉🔥</h3>
</div>

<h3 id="middle">中間にいるロボ玉🔥</h3>


<div id="robotama-project">
    <h3 class="project">ロボ玉開発計画🔥</h3>

    <ol>
        <li>ロボ玉試作1号機🔥</li>
        <li>ロボ玉試作3号機🔥</li>
        <li>ロボ玉試作4号機🔥</li>
    </ol>

    <button type="button">ロボ玉🔥</button>
</div>

<script>

    // 1. class名「robotama」のHTML要素を取得
    const robotama = document.querySelector('.robotama');

    // 2. 取得した「robotama」の「親要素」(parentNode)を取得
    const parentElement = robotama.parentNode;

    console.log({parentElement});
        // {parentElement: div.robotama-parent}

    // 3. id名「robotama-project」のHTML要素を取得
    const robotamaProject = document.getElementById('robotama-project');

    // 4. id名「robotama-project」の「子要素たち」(children)を取得
    const childrenElement = robotamaProject.children;

    console.log({childrenElement});
        // childrenElement: HTMLCollection(3) [h3.project, ol, button]

    let elemNum = 0;
    for (const elem of childrenElement) {
        elemNum ++;
        console.log({[elemNum]: elem});
            // {1: h3.project}
            // {2: ol}
            // {3: button}
    }

    // 5. id名「middle」のHTML要素を取得
    const middleElement = document.getElementById('middle');
    console.log({middleElement});
        // {middleElement: h3#middle}

    // 6. id名「middle」の「前隣の要素」を取得
    const prevElement = middleElement.previousElementSibling;
    console.log({prevElement});
        // {prevElement: div.robotama-parent}

    // 7. id名「middle」の「後に続く要素」を取得
    const nextElement = middleElement.nextElementSibling;
    console.log({nextElement});
        // {nextElement: div#robotama-project}


</script>
</body>
</html>