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

вы можете использовать ES2015 (ES6) распространение оператор:

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

преобразует StaticNodeList в массив элементов.

вот пример того, как его использовать.

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

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

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

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

и тогда вы можете сделать:

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

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

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

не делай этого! это не гарантирует работу.

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

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

Я думаю, что вы можете просто сделать следующее

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

Он отлично работает для меня

Это вариант, который я хотел бы добавить к ряду других возможностей, предложенных другими здесь. Он предназначен только для интеллектуального удовольствия и является не рекомендуется.

---

только на развлечения из этого, вот способ "заставить"querySelectorAll встать на колени и поклониться вам:

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

Теперь он чувствует себя хорошо, чтобы перешагнуть через эту функцию, показывая ему, кто босс. Теперь я не знаю, что лучше, создавая совершенно новый имени