JavaScriptを使っていると、ある要素の配下にある要素(子要素)を全て取得したり、逆にあるタグを基準としたときにそのタグの親となる要素を取得したい、なんてことがあります。

直接取得したい要素をgetQuerySelectorなどで取得すればよいのでは？と思うかもしれませんが、やりにくい場合があります。

たとえば画面が動的に変化するなどして子要素になるタグの種類や数が刻々と変化するような場合は要素を直接指定するよりも間接的にxxの子要素というように指定して取得した方が都合がいいですね。

この記事では取得方法のサンプルパターンを記載していますが、HTMLの部分は全て共通して同じものを使っています。

以下のようにcontainerというクラス名が付与されたdivタグの中にboxクラスが三つ存在するようにし、それらの文字の色をJavaScriptで変更する、ということをやっています。

<div class="container">
  <div class="box" id="box1">
    box1
  </div>
  <div class="box" id="box2">
    box2
  </div>
  <div class="box" id="box3">
    box3
  </div>
</div>

子要素を全て取得する

子要素はchildrenプロパティの中に入っています。

See the Pen 子要素を全て取得するサンプル by Makoto Ohnami (@zohnami) on CodePen.

以下のようにchildrenはforEachは使えないので、forでループするやり方をしています。

container.children.lengthで子要素の数を取得できるのでその数までカウントアップして全ての文字色を赤色に変更しています。

const container = document.querySelector('.container');
for(let i = 0; container.children.length; i++) {
  container.children[i].style.color = 'red';  
}

最初と最後の子要素を取得する

次は子要素の中でも最初と最後を指定して取得する方法です。

firstElementChildとlastElementChildが使えます。

See the Pen 子要素を取得する_最初と最後 by Makoto Ohnami (@zohnami) on CodePen.

以下のようにfirstElementChildで取得した最初の子要素の文字色は赤色に、lastElementChildで取得した最後の文字色は青色に変更しています。

childrenで取得してループ中で制御してもいいですが、firstElementChildやlastElementChildのほうがスマートにコードを書くことができるでしょう。

const container = document.querySelector('.container');
container.firstElementChild.style.color = 'red';
container.lastElementChild.style.color = 'blue';

兄弟(前後の)要素を取得する

今度は要素のお隣にある要素を取得する方法です。previousElementSiblingとnextElementSiblingというのがあります。

See the Pen 子要素を取得する_前後(兄弟)の要素 by Makoto Ohnami (@zohnami) on CodePen.

以下のコードでは最初にbox2を取得しています。

そして、box2の一つ手前の要素、box1はpreviousElementSiblingで取得して文字色を緑色に変更しています。

また、box3はnextElementSiblingで取得して文字色を青色に変更しています。

siblingは「兄弟」という意味ですね。

const box2 = document.querySelector('#box2');
box2.previousElementSibling.style.color = 'green';  
box2.nextElementSibling.style.color = 'blue';

親要素を取得する

最後は親要素の取得です。parentNodeというプロパティが使えます。

See the Pen 親要素を取得するサンプル by Makoto Ohnami (@zohnami) on CodePen.

以下のjsのコードではbox2を取得したあとにその親要素(container)をparentNodeで取得して、文字色と背景色を変更しています。

親要素に色の設定をしたことで、子要素全てに色の設定が適用されています。

const box2 = document.querySelector('#box2');
box2.parentNode.style.color = 'green';  
box2.parentNode.style.backgroundColor = 'lightblue';

ちなみに、これらのプロパティは連結して使うことも可能です。

あまりやりすぎるとわかりにくくなるかもですが・・

// 親要素に戻って、そこからさらに最初の子要素を取得する例
box2.parentNode.firstElementChild.style.fontWeight = 'bold';

結構柔軟に指定できますね！

こうした要素を間接的な経路で取得する方法を押さえておくと、コードをより短く端的に書けるようになったり、複雑な要件に対応するための手がかりにもなりそうです。

この記事の環境情報

  • Google Chrome 108.0.5359.124
  • CodePenさん、いつもありがとう