JavaScriptのchildで子要素の順番を指定して取得

親要素に、子要素が複数あるブロックがある場合、JavaScriptの .firstElementChild .children[n] .lastElementChild のプロパティを使って、子要素の順番を指定して取得します。

今回は、このプロパティを使って何かUIを作る感じではなく説明が主体の内容ですが、是非最後までご覧いただけると嬉しいです。

各子要素を取得して表示を変えるサンプル

はじめに、イメージを掴む用のサンプルからご覧ください。

下部にあるボタンには、それぞれ今回の記事で出てくるプロパティ名が記載されています。それらのボタンをクリックすると、対応する要素の表示が切り替わる仕組みです。

サンプルに使っているHTML・JavaScriptのコードも、以下に記載しておきます。気になる方はこちらも参考にしてみてください。

<ul id="parentList">
  <li>最初の要素</li>
  <li>2個目の要素</li>
  <li>3個目の要素</li>
  <li>4個目の要素</li>
  <li>5個目の要素</li>
  <li>最後の要素</li>
</ul>

<div class="btnWrapper">
  <button id="firstBtn">.firstElementChild</button>
  <button id="secondBtn">.children[1]</button>
  <button id="fourthBtn">.children[3]</button>
  <button id="lastBtn">.lastElementChild</button>
</div>

<script>
var list = document.getElementById("parentList");

document.getElementById("firstBtn").addEventListener('click', (e) => {
  // firstElementChild で最初の要素
  list.firstElementChild.classList.add('classplus');
  e.target.classList.add('clickon');
},{ once: true });


document.getElementById("secondBtn").addEventListener('click', (e) => {
  // children[1] で2個目の要素
  list.children[1].classList.add('classplus');
  e.target.classList.add('clickon');
},{ once: true });

document.getElementById("fourthBtn").addEventListener('click', (e) => {
  // children[3] で4個目の要素
  list.children[3].classList.add('classplus');
  e.target.classList.add('clickon');
},{ once: true });

document.getElementById("lastBtn").addEventListener('click', (e) => {
  // lastElementChild で最後の要素
  list.lastElementChild.classList.add('classplus');
  e.target.classList.add('clickon');
},{ once: true });
</script>

子要素の順番を取得する各プロパティ

今回、以下3種のプロパティを使います。

この3種のプロパティで、親要素に含有される複数の子要素から順番を指定して取得します。

これらは参照専用のElement で返すプロパティで、HTML要素のオブジェクトなどを含む要素を表すオブジェクトです。

かかかず

あくまで「参照専用」なので注意しましょう。

文字だけだと分かりづらい部分もあるかと思うので、それぞれどの順番の要素を取得するものなのか？のサンプルも交え見ていきます。

最初の子要素を取得する「.firstElementChild」

最初の子要素を取得する .firstElementChild のプロパティです。

.firstElementChild で取得する子要素が分かるよう、取得した箇所に黒く色塗りがされるサンプルを以下に作りました。

上記のサンプルでは、親要素に ul タグを置き子要素に6つの li タグを配置しています。

このように、プロパティの .firstElementChild を使って、一番初めの子要素を Element で返します。

「.firstElementChild」の構文

.firstElementChild の構文は、以下の通りです。

element.firstElementChild.classList.add('classplus');

n番目の要素を取得する「.children[n]」

.children[n] は、[n]番目の子要素を取得するプロパティです。

以下のサンプルでは、.children[1]で2番目の要素。.children[3] で4番目の要素を指定しています。

プロパティの .children[n] を使うと、[n]番目の子要素を Element で返します。

「.children[n]」の構文

.children[n] の構文は、以下の通りです。

element.children[n].classList.add('classplus');

.children[n] の[n]で順番を指定できるので、最初の子要素・最後の子要素の取得もできるので、汎用性は高いプロパティです。

かかかず

最初の子要素を取得する場合は、.children[0]と書けばOKです。

最後の子要素を取得する「.lastElementChild」

.lastElementChild は、最後にある子要素を取得するプロパティです。

上記のように、一番最後にある子要素を Element で返します。

「.lastElementChild」の構文

.lastElementChild の構文は、以下の通りです。

element.lastElementChild.classList.add('classplus');

さいごに

あくまでプロパティなので、使い方としてはまず親要素を取得して、その次に子要素を取得する流れで使うことが多いと思います。

特に、今回のサンプルのようなリストやテーブルの要素が多いシチュエーションで使うと便利なので、是非参考にしてみてください。