¿Por qué document.querySelectorAll devuelve un StaticNodeList en lugar de un Array real?

Me molesta que no pueda hacerlo document.querySelectorAll(...).map(...)ni siquiera en Firefox 3.6, y todavía no puedo encontrar una respuesta, así que pensé en hacer una publicación cruzada en SO la pregunta de este blog:

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

¿Alguien sabe de una razón técnica por la que no obtienes una matriz? O por qué un StaticNodeList no hereda de un Array de tal manera que podría usarmap , concatetc?

(Por cierto, si es solo una función lo que desea, puede hacer algo como NodeList.prototype.map = Array.prototype.map;... pero nuevamente, ¿por qué esta funcionalidad (¿intencionalmente?) Está bloqueada en primer lugar?)

Creo que es una decisión filosófica del W3C. El diseño del DOM de W3C [especificación] es bastante ortogonal al diseño de JavaScript, ya que el DOM se entiende a ser una plataforma y un lenguaje neutro.

Decisiones como " getElementsByFoo()devuelve un pedido NodeList" o " querySelectorAll()devuelve un StaticNodeList" son muy intencionales, por lo que las implementaciones no tienen que preocuparse por alinear su estructura de datos devueltos según las implementaciones dependientes del lenguaje (como .mapestar disponible en Arrays en JavaScript y Ruby, pero no en listas en C #).

El W3C apunta bajo: dirán que a NodeListdebería contener una propiedad de solo lectura .lengthde tipo unsigned long porque creen que cada implementación puede al menos admitir eso , pero no dirán explícitamente que el []operador de índice debería estar sobrecargado para admitir la obtención de elementos posicionales, porque no quieren obstaculizar un pequeño lenguaje deficiente que aparece y que quiere implementar getElementsByFoo()pero no puede soportar la sobrecarga del operador. Es una filosofía predominante presente en gran parte de la especificación.

John Resig ha expresado una opción similar a la suya, a la que agrega :

Mi argumento no es tanto que NodeIteratorno sea muy parecido a DOM, sino que no es muy parecido a JavaScript. No aprovecha las características presentes en el lenguaje JavaScript y las usa lo mejor que puede ...

Siento cierta empatía. Si el DOM se escribió específicamente con las funciones de JavaScript en mente, sería mucho menos incómodo y más intuitivo de usar. Al mismo tiempo, comprendo las decisiones de diseño del W3C.

Puede utilizar el operador de propagación ES2015 (ES6) :

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

convertirá StaticNodeList en una matriz de elementos.

A continuación, se muestra un ejemplo de cómo utilizarlo.

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

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

No sé por qué devuelve una lista de nodos en lugar de una matriz, tal vez porque, como getElementsByTagName, actualizará el resultado cuando actualice el DOM. De todos modos, un método muy simple para transformar ese resultado en una matriz simple es:

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

y luego puedes hacer:

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

Solo para agregar a lo que dijo Crescent,

si solo desea una función, puede hacer algo como NodeList.prototype.map = Array.prototype.map

¡No hagas esto! No está garantizado que funcione.

Ningún estándar JavaScript o DOM / BOM especifica que la NodeListfunción de constructor existe incluso como una windowpropiedad / global , o que la NodeListdevuelta por querySelectorAllheredará de ella, o que su prototipo es modificable, o que la funciónArray.prototype.map realmente funcionará en una NodeList.

Una NodeList puede ser un 'objeto de host' (y es uno, en IE y en algunos navegadores más antiguos). Los Arraymétodos se definen como permitidos para operar en cualquier 'objeto nativo' de JavaScript que exponga numérico ylength propiedades, pero no es necesario que funcionen en objetos host (y en IE, no lo hacen).

Es molesto que no obtenga todos los métodos de matriz en las listas DOM (todos ellos, no solo StaticNodeList), pero no hay una forma confiable de evitarlo. Tendrá que convertir todas las listas DOM que obtenga a una matriz manualmente:

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

Creo que simplemente puedes seguir

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

Funciona perfecto para mi

Esta es una opción que quería agregar a la gama de otras posibilidades sugeridas por otros aquí. Está destinado únicamente a la diversión intelectual y no se recomienda .

Solo por diversión , aquí hay una manera de "forzar" querySelectorAlla arrodillarse e inclinarse ante usted:

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

Ahora se siente bien pasar por encima de esa función, mostrándole quién es el jefe. Ahora no sé qué es mejor, crear un envoltorio de función con nombre completamente nuevo y luego hacer que todo su código use ese nombre extraño (casi al estilo jQuery) o anule la función como la anterior una vez para que el resto de su código aún pueda para usar el nombre del método DOM original querySelectorAll.

• Dicho enfoque eliminaría el posible uso de submétodos.

No recomendaría esto de ninguna manera, a menos que honestamente no le des un [ya sabes qué].