NodeListは配列じゃないよって話
そういやdocument.querySelectorAll()でElementNodeの配列らしきものを受け取った時にisArray()を使ってもfalseが出るの何でなんだ?ブラケット[]で囲まれてるのに配列じゃないの?Array.push()はちゃんと出来たのになぜ?
— nimius (@nimiusxp) 2016, 1月 10
というわけで調べてみるとこんなのが出てきた。
NodeList are used very much like arrays and it's tempting to invoke Array.prototype methods on them, however NodeList objects don't have any of the familiar Array methods.
NodeList - Web APIs | MDN
簡単に言えば、document.querySelectorAll()で取得したNodeListは配列じゃなくて"配列っぽい"オブジェクトということ。配列と同じように扱うと痛い目みるよってわけ。
解決策としては配列に変換すればいいのだけど色々方法があるみたい。
- apply(), call()を使う方法
var nodeList = document.querySelectorAll("div"); //適当に取得 Array.isArray(nodeList); // false => not Array Array.isArray(Array.apply(nodeList)); // true => Array Array.isArray(Array.call(nodeList)); // true => Array Array.isArray(Array.prototype.slice.apply(nodeList)); // true => Array Array.isArray(Array.prototype.slice.call(nodeList)); // true => Array Array.isArray([].slice.apply(nodeList)); // true => Array Array.isArray([].slice.call(nodeList)); // true => Array
- Spread Operator(...)を使う方法
Array.isArray([...nodeList]); // true => Array Firefoxのみ
- Array.from()を使う方法
Array.isArray(Array.from(nodeList)); // true => Array Firefoxのみ
下の2つはまだサポートしてないブラウザが多いので一番上のが実用的みたい。
個人的には一番下が好み。