JavaScriptでn番目の子要素を取得する方法
JavaScriptを使って、同じ子要素のタグ・クラスのn番目を取得したい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
実装サンプル
See the Pen
JavaScriptでn番目の子要素を取得する方法 by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
ulタグ内の3番目にあるli要素をJavaScriptで取得。
テキストを動的に変更（リスト03→3番目を変更）してます。
実装手順は以下の通りです。
n番目の子要素を取得するJavaScriptコード
(function() {
//全ての同じ子要素を取得
var list = document.querySelectorAll('ul li');
list[2].textContent = '3番目を変更';
}());
n番目の子要素を取得するJavaScriptコード例です。
querySelectorAllを使う事で引数に指定した全ての子要素を取得する事が出来ます。
上記関数の後に角括弧 ([])を連結。
角括弧内に取得したいn番目の数値を指定すればOKです。
以上で実装完了です。
まとめ
JavaScriptでn番目の子要素を取得する方法について紹介しました。
以上で解説を終わります。
目次