JavaScript

【JavaScript】querySelectorAllで取得した値をmapしたい!

ねこくん
ねこくん
document.querySelectorAll() で取得した値をmapしようとしたら、できなかったんだけど!
Yuki
Yuki
document.querySelectorAll()ArrayじゃなくてNodeListを返すから、mapは使えないんだよね。
ねこくん
ねこくん
NodeListって配列っぽいのに配列じゃないんだね。。。

NodeListはmapできない

document.querySelectorAll()Arrayではなく、NodeListを返します。
そして、mapは配列(Array)に対してのメソッドなので、NodeListのままでは使えません。
ということで、Arrayにしてあげればmapできます。

これで解決!

😍 Array.from()Arrayに変換

const hoge = document.querySelectorAll('.js-hoge');
const hogeArray = Array.from(hoge)

↓ちなみにforEach()は使用可能です。

NodeList は Array とは異なりますが、 forEach() メソッドで処理を反復適用することは可能です。 Array.from() を使うことで Array に変換することができます。

引用元:MDN NodeList
https://developer.mozilla.org/ja/docs/Web/API/NodeList

おまけ

Array.from()はES6からなので、使えない場合はこんな方法もあります。

const hoge = document.querySelectorAll('.js-hoge');
const hogeArray = [].slice.call(hoge);

それでは皆さん、ステキなJSライフを!

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です