指定したclassを持つ要素を全て取得し、対象の要素に変更を加える方法

idではなく、classを指定して、そのclassを持つHTML要素全てに何らかの対応・・・例えば、追加のstyleやclassを付与したいケースもあると思います。

そのサンプルと説明をしていきたいと思います。

サンプルコード

document.addEventListener('DOMContentLoaded', () => {
  const items = document.querySelectorAll('.targetClass');

   items.forEach(item => {
	   item.classList.add('.addClass');
   });

});

サンプルコードの説明

基本的には、サンプルのコピペでOkです。

ただし、DOMContentLoadedが、htmlを全て読み込んだ後に、処理を実行させることぐらいは知っていた方がいいかもしれません。

classを取得するタイミングなどに関わりますので。

そして、サンプルコードは、ページにある.targetClassの要素を配列として全てを取得します。

そして、forEachによって取得した配列全てを一つ一つ実行する中で、addClassを追加しています。

カスタマイズ

targetClassを、あなたが変更したい要素が持つclassに変更し、forEachの中で変更したい処理を記載すればOKです。

サンプルでは、classList.addでclassを追加しているだけです。

間違いやすい点

初心者だと、配列で取得していることを忘れてしまうことが多い点です。

forEachで配列の全てを実行することを忘れないようにしましょう。