Written by Kasumi

【JavaScript】親要素から子要素を取得する方法

JavaScriptで親要素から子要素を取得したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

最初の子要素を取得する方法

<ul id="list">
  <li>リスト01</li>
  <li>リスト02</li>
  <li>リスト03</li>
</ul>
<script>
// 指定したid属性のHTML要素を取得
  const list = document.getElementById("list");

    // 最初の子要素を取得
    let firstChild = list.firstElementChild;
    console.log(firstChild.textContent); 
    //リスト01

</script>

最初の子要素を取得するコード例です。

firstElementChildプロパティを使います。

親要素とfirstElementChildを連結。

最初の子要素を返します。

最後の子要素を取得

<ul id="list">
  <li>リスト01</li>
  <li>リスト02</li>
  <li>リスト03</li>
</ul>
<script>
// 指定したid属性のHTML要素を取得
  const list = document.getElementById("list");

    // // 最後の子要素
    // let lastChild = list.lastElementChild;
    // console.log(lastChild.textContent); 
    // // リスト03

</script>

最後の子要素を取得するコード例です。

lastElementChildプロパティを使います。

親要素とlastElementChildを連結。

最後の子要素を返します。

全ての子要素を取得

<ul id="list">
  <li>リスト01</li>
  <li>リスト02</li>
  <li>リスト03</li>
</ul>
<script>
// 指定したid属性のHTML要素を取得
  const list = document.getElementById('list');
  const listChild = list.children;

    //全ての子要素を取得
    for(let i= 0; i<listChild.length; i++) {
    	console.log(list.children[i].textContent);
    }
  //リスト01
  //リスト02
  //リスト03

</script>

全ての子要素を取得するコード例です。

childrenプロパティを使います。

親要素とchildrenを連結。

全ての子要素を配列形式で取得できます。

上記配列をfor文等を使いループ処理。

子要素を一つずつ取り出せます。

まとめ

JavaScriptで親要素から子要素を取得する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

【JavaScript】コンストラクター関数を使ってオブジェクトの雛形を作成・インスタンス化する方法

2022.12.12
692
JavaScript

【JavaScript】URLからパラメータを削除する方法

2023.04.13
5485
JavaScript

【JavaScript】スプレット構文(…)を使い、配列・オブジェクトを追加・連結(マージ)する方法

2022.12.04
735
JavaScript

【JavaScript】スクロールを終えた後に任意の処理を実行する方法

2023.02.21
604