特定のクラス名がある場合のみ、クラス名を追加する。

Question

以前こちらで特定のdivクラス内のdivにクラス名を追加する方法は学んだのですが
下記のように特定のクラス名が同じページ内にある場合
別のdivクラス内のdivクラスにも追加する方法はありますか？

イメージとしては、クラス名“box1”のdivが同じページ内にある場合のみ
クラス名“box2_in”にbox2_delを追加したいです。
（htmlPage1では追加されて、htmlPage2では追加されない）

<div class="box1">
</div>

<div class="box2">
  <div class="box2_in">
  </div>
</div>

<div class="box3">
</div>

<div class="box2">
  <div class="box2_in">
  </div>
</div>

var box = document.getElementsByClassName('box1');
var boxin = box.querySelector(".box2_in");
boxin.classList.add('box2_del');

よろしくお願いいたします。

Answer 1

getElementsByClassNameは複数の要素を返すことを前提としているので、HTMLCollection という配列のような物を返します。

var box = document.getElementsByClassName('box1');
var boxin = box[0].querySelector(".box2_in");
//              ↑ 最初の要素のみ処理する場合
boxin.classList.add('box2_del');

【Document.getElementsByClassName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

【getElementsByClassNameとgetElementByIdの返り値の違い - Qiita】
https://qiita.com/rindarinda5/items/c26dc81fe8cd98992dc1

Comments

[cassis]

ありがとうございます。上記で試してみたのですがクラスが追加されず・・・。
var box = document.getElementsByClassName('box1');
box[0].classList.add('box2_del');
上記ですとbox1にbox2_delが追加できるところまでは確認済なので、
2行目の.box2_inを選択するところで引っかかっているようです。

[kei344]

すみません、提示されたHTMLを読めていませんでした。
「box[0].querySelector(".box2_in");」は「要素内のbox2_inクラスの要素を探す」メソッドなので、提示されたHTML構造では探索できません。

「box1が有る時に」ということがしたいのであれば、下記のようにします。
var box = document.getElementsByClassName('box1');
if ( box.length > 0 ) {
var box2 = document.getElementsByClassName('box2_in');
}

[cassis]

再度ありがとうございます！無事動きました。
ありがとうございました。