指定したclassを持つ要素にclassを追加したい

Question

特定のclassを持つ要素に新たにclassを追加したいです。
idからclassList.addで追加する方法も考えたのですが、できれば複数の要素に一気にclassを付けたいのです。
それぞれ１つずつclassを付けても良いのですがスマートなやり方は無いでしょうか。

var obj = document.getElementsByClassName("hoge");
var list = obj.classList;
obj.classList.add("piyo");

<p class="hoge">文章1<p>
<p class="huga">文章2<p>
<p class="hoge huga">文章3<p>

このclassにhogeを含むp要素に一括でpiyoを付けたいのです。
ニュアンスとしてはこのような感じですが、このJSでは（当たり前ですが、）objはundifinedになります。

Comments

[masaya_ohashi]

jQueryは使えますか？

[taste]

できれば使わない方法でお願いします。

Answer 1

jQuery無しならgetElementsByClassNameで返ってくる結果をforで回すしかありません。

var list = document.getElementsByClassName("hoge");
for (var i = 0; i < list.length; i++) {
  var element = list[i];
  element.classList.add('piyo');
}

jQuery有りならもっと簡単に書けます。

$(".hoge").addClass("piyo");

Comments

[taste]

jQuery有りだとかなり綺麗ですね。検討してみます。
ありがとうございました。

Answer 2

window.addEventListener('DOMContentLoaded', function(e){
  Array.prototype.map.call(document.querySelectorAll("p.hoge"),function(x){
    x.classList.add("piyo");
  });
});

Answer 3

HTMLCollectionのままではほとんど何もできません。
https://developer.mozilla.org/ja/docs/Web/API/HTMLCollection

document.querySelectorAll(".hoge").forEach((obj, index, list) => obj.classList.add("piyo"));

jQueryを使えばあたかも一気に変更しているようですが、内部ではループしています。

なお、objがundifinedになるのは当然ではないので、何か間違っているかと思います。

Comments

[yambejp]

IEやEdgeで動かないものは流石に注記してあげたほうが良いと思います