読者です 読者をやめる 読者になる 読者になる

NodeListは配列じゃないよって話


というわけで調べてみるとこんなのが出てきた。

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つはまだサポートしてないブラウザが多いので一番上のが実用的みたい。
個人的には一番下が好み。