Why does document.querySelectorAll return a StaticNodeList rather than a real Array?

Question

It bugs me that I can't just do document.querySelectorAll(...).map(...) even in Firefox 3.6, and I still can't find an answer, so I thought I'd cross-post on SO the question from this blog:

http://blowery.org/2008/08/29/yay-for-queryselectorall-boo-for-staticnodelist/

Does anyone know of a technical reason why you don't get an Array? Or why a StaticNodeList doesn't inherit from an Array in such a way that you could use map, concat, etc?

(BTW if it's just one function you want, you can do something like NodeList.prototype.map = Array.prototype.map;...but again, why is this functionality (intentionally?) blocked in the first place?)

Answer 1

You can use ES2015 (ES6) spread operator:

[...document.querySelectorAll('div')]

will convert StaticNodeList to Array of items.

Here is an example on how to use it.

[...document.querySelectorAll('div')].map(x => console.log(x.innerHTML))

<div>Text 1</div>
<div>Text 2</div>