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

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>

I don't know why it returns a node list instead of an array, maybe because like getElementsByTagName it will update the result when you update the DOM. Anyway a very simple method to transform that result in a simple array is:

Array.prototype.slice.call(document.querySelectorAll(...));

and then you can do:

Array.prototype.slice.call(document.querySelectorAll(...)).map(...);

Just to add to what Crescent said,

if it's just one function you want, you can do something like NodeList.prototype.map = Array.prototype.map

Don't do this! It's not at all guaranteed to work.

No JavaScript or DOM/BOM standard specifies that the NodeList constructor-function even exists as a global/window property, or that the NodeList returned by querySelectorAll will inherit from it, or that its prototype is writable, or that the function Array.prototype.map will actually work on a NodeList.

A NodeList is allowed to be a ‘host object’ (and is one, in IE and some older browsers). The Array methods are defined as being allowed to operate on any JavaScript ‘native object’ that exposes numeric and length properties, but they're not required to work on host objects (and in IE, they don't).

It's annoying that you don't get all the array methods on DOM lists (all of them, not just StaticNodeList), but there's no reliable way round it. You'll have to convert every DOM list you get back to an Array manually:

Array.fromList= function(list) {
    var array= new Array(list.length);
    for (var i= 0, n= list.length; i<n; i++)
        array[i]= list[i];
    return array;
};

Array.fromList(element.childNodes).forEach(function() {
    ...
});

Array.from(document.querySelectorAll(...)).map(...)

Not available on IE11 though https://caniuse.com/mdn-javascript_builtins_array_from

I think you can simply do following

Array.prototype.map.call(document.querySelectorAll(...), function(...){...});

It works perfect for me

This is an option I wanted to add to the range of other possibilities suggested by others here. It's meant for intellectual fun only and is not advised.

Just for the fun of it, here's a way to "force" querySelectorAll to kneel down and bow to you:

Element.prototype.querySelectorAll = (function(QSA){
    return function(){
        return [...QSA.call(this, arguments[0])]
    }
})(Element.prototype.querySelectorAll);

Now it feels good to step all over that function, showing it who's the boss. Now I don't know what's better, creating a whole new named function wrapper and then have all your code use that weird name (pretty much jQuery-style) or override the function like above once so the rest of your code would still be able to use the original DOM method name querySelectorAll.

• Such approach would eliminate possible use of sub-methods

I wouldn't recommend this in any way, unless you honestly don't give a [you know what].