Почему document.querySelectorAll возвращает StaticNodeList, а не действительный массив?

Я не знаю, почему он возвращает список узлов вместо массива, возможно, потому что, как и getElementsByTagName, он обновляет результат при обновлении DOM. В любом случае очень простой метод преобразования этого результата в простой массив:

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

, а затем вы можете сделать:

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

Просто добавьте к тому, что сказал Полумесяц,

если это всего одна функция, которую вы хотите, вы можете сделать что-нибудь вроде NodeList.prototype.map = Array.prototype.map

Не делайте этого! Это совсем не гарантирует работу.

Ни один из стандартов JavaScript или DOM / BOM не указывает, что функция-конструктор NodeList существует даже как глобальное свойство / window , или что NodeList , возвращенный querySelectorAll унаследует от него, или что его прототип доступен для записи, или что функция Array.prototype.map действительно будет работать с NodeList.

NodeList может быть «объектом-хостом» (и является одним из них в IE и некоторых старых браузерах). Методы Array определены как разрешенные для работы с любым «собственным объектом» JavaScript, который предоставляет числовые свойства и свойства length , но они не обязательны для работы с объектами хоста (и в IE, они этого не делают).

Досадно, что вы не получаете все методы массива в списках DOM (все они, а не только StaticNodeList), но надежного способа обойти это нет. Вам придется вручную преобразовать каждый возвращаемый список DOM в массив:

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() {
    ...
});