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.10.15
2710
JavaScript

JavaScriptの配列で条件一致する要素だけ抽出する方法【filterメソッドを使おう】

2023.01.04
4915
JavaScript

JavaScriptで文字列と変数を組み合わせて出力する二つの方法

2022.11.28
1478
JavaScript

【JavaScript】HTML要素に指定したクラスが付与されているか存在をチェックする方法

2023.01.25
623