ねこくん
document.querySelectorAll()
で取得した値をmap
しようとしたら、できなかったんだけど!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ライフを!