Written by Kasumi

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番目の子要素を取得する方法について紹介しました。

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

目次

関連記事

JavaScript

【JavaScript初心者向け】繰り返し処理を使い、配列要素を展開する方法

2022.08.24
174
JavaScript

IEブラウザか、その他以外のブラウザかを判定し、条件分岐・判別する方法【Javascript】

更新日:2022.09.09
394
JavaScript

JavaScriptで右クリックを無効・禁止にする方法

2022.12.07
75
JavaScript

【簡単】JavaScriptを使ってhtmlタグを取得し、値を出力・書き換える方法

更新日:2022.09.09
219