JavaScriptのchildrenで特定の子要素を取得する方法

JavaScirptを使ってリストの特定の子要素を取得したいんだけどどうしたらいいの？

本記事では上記のような疑問を解決します

しの

例えばメニューの中の特定の要素だけドロップダウンメニューにする時に「特定の要素だけを取得したい」場合などがあります。

そういった時に使える取得方法ですので是非ご覧ください。

この記事を書いている人

こんにちは、しのです。

この記事は現役フロントエンドエンジニアである自身の経験を基に書いております。

実務でJavaScriptを使用しているため、信頼性の担保になると考えております。

こんな方にオススメです

ドロップダウンメニュー作ってるけど子要素の取得方法がいまいちわからないなあ

firstElementChildとかlastElementChildとかもう意味わかんないよ、、、

上記のようなお悩みを解決する記事となっております。

特定の要素を取得する方法

では早速見ていきましょう。

<HTML>

HTMLは一般的なulとliタグを用意しています。

ulの子要素を取得する為にulにidを付けています。

<ul id="list">
  <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    <li>list4</li>
    <li>list5</li>
</ul>

<JavaScirpt>

listという変数にHTMLでlistというid破ったulタグを取得して代入しています。

その後、list.children[2]で3番目のliタグを取得できます。

let list =document.getElementById('list');

//特定の要素を取得する場合はelement.children[]とすれば取得できる
console.log(list.children[2]);

<実行結果>

<li>list3</li>

上記の通り、特定の要素を取得する場合はelement.children[]とすれば取得できます。　

ちなみに[]というタグの場合は配列なので1番目の要素は[0]、2番目の要素は[1]で取得する形になるのでご注意下さい。

childrenプロパティとは

ParentNode の children プロパティは、呼び出された際のノードの子要素ノードをすべて含んだ動的な（生きている） HTMLCollection を返す、読み取り専用プロパティです。

出典元：MDN

このchildrenプロパティを使えばリストのどの部分でも要素を自由に取得する事が出来ますね。

しの

最初と最後の要素を取得する場合は？

では最初と最後の要素を取得する場合はどうすればよいでしょうか。

＜最初と最後の要素を取得する場合＞

let list=document.getElementById('list');
firstList=list.firstElementChild;

console.log(firstList);

let list=document.getElementById('list');
lastList=list.lastElementChild;

console.log(firstList);

＜結果＞

<li>list1</li>

<li>list5</li>

firstElementChildというメソッドでlistという変数（つまりul)の最初の子要素、つまりはlist1を取得しています。

同じくlastElementChildで最後の子要素を取得するという形になります。

メニューやリストを操作する時に必要なメソッドなので是非使ってみてくださいね。

それでは本日は以上となります。

いつもお読み頂きありがとうございます。

おしまい。