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

Меня беспокоит то, что я не могу просто сделать это document.querySelectorAll(...).map(...)даже в Firefox 3.6, и я все еще не могу найти ответ, поэтому я подумал, что я отправлю кросс-пост на SO вопрос из этого блога:

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

Кто-нибудь знает техническую причину, по которой вы не получаете массив? Или почему StaticNodeList не наследует от массива таким образом , что вы могли бы использовать map, concatи т.д.?

(Кстати, если вам нужна только одна функция, вы можете сделать что-то вроде NodeList.prototype.map = Array.prototype.map;... но опять же, почему эта функция (намеренно?) Заблокирована в первую очередь?)

Я считаю, что это философское решение W3C. Дизайн W3C DOM [spec] полностью ортогонален дизайну JavaScript, поскольку DOM должен быть нейтральным к платформе и языку.

Такие решения, как « getElementsByFoo()возвращает упорядоченный NodeList» или « querySelectorAll()возвращает StaticNodeList», в значительной степени преднамеренные, поэтому реализациям не нужно беспокоиться о выравнивании структуры возвращаемых данных на основе языковых реализаций (например .map, доступность в массивах в JavaScript и Ruby, но нет в списках в C #).

W3C стремятся к низкому уровню: они скажут, что a NodeListдолжно содержать свойство readonly .lengthтипа unsigned long, потому что они считают, что каждая реализация может хотя бы поддерживать это , но они не будут явно говорить, что []оператор индекса должен быть перегружен для поддержки получения позиционных элементов, потому что они не хотят заглушать какой-нибудь бедный маленький язык, который хотят реализовать, getElementsByFoo()но не могут поддерживать перегрузку операторов. Это преобладающая философия, присутствующая в большей части спецификации.

Джон Ресиг озвучил аналогичный вариант, как и ваш, к которому он добавляет :

Мой аргумент не столько в том, что NodeIteratorон не очень похож на DOM, сколько в том , что он не очень похож на JavaScript. Он не использует преимущества функций языка JavaScript и не использует их в меру своих возможностей ...

Я немного сочувствую. Если бы модель DOM была написана специально с учетом функций JavaScript, она была бы намного менее неудобной и более интуитивной в использовании. В то же время я понимаю дизайнерские решения W3C.

Вы можете использовать оператор распространения 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.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() {
    ...
});

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

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

Это работает идеально для меня

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

Просто для удовольствия , вот способ «заставить» querySelectorAllвстать на колени и поклониться вам:

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

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

• Такой подход исключил бы возможное использование подметодов.

Я бы ни в коем случае не рекомендовал это, если вам честно не наплевать [вы знаете, что].