【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で親要素から子要素を取得する方法について紹介しました。
以上で解説を終わります。
目次