取得したHTMLCollectionのclassNameだけを配列として取得したい

Question

取得したHTMLCollectionのそれぞれのclassNameだけを配列として取得したいと考えています。

const collection = document.getElementsByClassName("hoge");

これで collection に HTMLCollection が入ります。
この collection に入っている HTMLCollection の中の className だけを配列として取得する場合の方法を教えていただけますでしょうか。
下記のような for で collection[i].className を取得するという書き方もあるのですが、コードが冗長になってしまうような気がしたので、他に良いやり方があれば是非教えて下さい、よろしくお願いいたします。

let ary = [];
for (let i = 0; i < collection.length; j++) {
    ary.push(collection[i].className);
}

Comments

[m.ts10806]

-勘違いあったため編集削除

[m.ts10806]

というか提示されたコードが最もシンプルで読みやすく、冗長でもない簡潔なコードだと思います。

[dameo]

どうでもいいけど全部hogeって分かってるじゃん！って思ってしまいました。

Answer 1

[...document.getElementsByClassName("hoge")].map(x => x.className)

あとは、getElementsByClassName ではなく querySelectorAll を使えば文字数をちょっとだけ少なくできる、くらいでしょうか。

Comments

[aaidehacktik]

HTMLCollectionをArray.from()で配列にするとmap()が使えるようになったので、こちらで進めさせていただきます。ありがとうございます！

Answer 2

結構長いですが、

Array.prototype.map.call(document.getElementsByClassName("hoge"),x => x.className)