Estaba trabajando en un breve script para cambiar <abbr>el texto interno de los elementos, pero descubrí que nodelistno tiene un forEachmétodo. Sé que nodelistno se hereda de Array, pero ¿no parece forEachque sería un método útil tener? ¿Hay un problema de implementación en particular no soy consciente de que impide que se agregue forEacha nodelist?

Nota: Soy consciente de que Dojo y jQuery tienen forEachde alguna forma sus nodelists. No puedo usar ninguno de los dos por limitaciones.

NodeList ahora tiene forEach () en todos los navegadores principales

Consulte nodeList forEach () en MDN .

Respuesta original

Ninguna de estas respuestas explica por qué NodeList no hereda de Array, lo que le permite tener forEachy todo lo demás.

La respuesta se encuentra en este hilo es-discusion . En resumen, rompe la web:

El problema era el código que asumía incorrectamente que instanceof significaba que la instancia era un Array en combinación con Array.prototype.concat.

Hubo un error en la biblioteca de cierre de Google que causó que casi todas las aplicaciones de Google fallaran debido a esto. La biblioteca se actualizó tan pronto como se encontró esto, pero es posible que todavía haya código que haga la misma suposición incorrecta en combinación con concat.

Es decir, algún código hizo algo como

if (x instanceof Array) {
  otherArray.concat(x);
} else {
  doSomethingElseWith(x);
}

Sin embargo, concattratará las matrices "reales" (no la instancia de Array) de manera diferente a otros objetos:

[1, 2, 3].concat([4, 5, 6]) // [1, 2, 3, 4, 5, 6]
[1, 2, 3].concat(4) // [1, 2, 3, 4]

lo que significa que el código anterior se rompió cuando xera una NodeList, porque antes iba por el doSomethingElseWith(x)camino, mientras que después seguía por el otherArray.concat(x)camino, lo que hizo algo extraño ya que xno era una matriz real.

Durante algún tiempo hubo una propuesta para una Elementsclase que era una subclase real de Array, y se usaría como "la nueva NodeList". Sin embargo, eso se eliminó del estándar DOM , al menos por ahora, ya que aún no era factible de implementar por una variedad de razones técnicas y relacionadas con las especificaciones.

Tu puedes hacer

Array.prototype.forEach.call (nodeList, function (node) {

    // Your code here.

} );

Puede considerar crear una nueva matriz de nodos.

  var nodeList = document.getElementsByTagName('div'),

      nodes = Array.prototype.slice.call(nodeList,0); 

  // nodes is an array now.
  nodes.forEach(function(node){ 

       // do your stuff here.  

  });

Nota: Esta es solo una lista / matriz de referencias de nodos que estamos creando aquí, no hay nodos duplicados.

  nodes[0] === nodeList[0] // will be true

Nunca digas nunca, es 2016 y el NodeListobjeto ha implementado un forEachmétodo en la última versión de Chrome (v52.0.2743.116).

Es demasiado pronto para usarlo en producción, ya que otros navegadores aún no lo admiten (FF 49 probado), pero supongo que pronto se estandarizará.

En resumen, es un conflicto de diseño implementar ese método.

De MDN:

¿Por qué no puedo usar forEach o map en una NodeList?

NodeList se utilizan de forma muy similar a las matrices y sería tentador utilizar métodos Array.prototype en ellas. Sin embargo, esto es imposible.

JavaScript tiene un mecanismo de herencia basado en prototipos. Las instancias de matriz heredan métodos de matriz (como forEach o map) porque su cadena de prototipos se parece a la siguiente:

myArray --> Array.prototype --> Object.prototype --> null (la cadena prototipo de un objeto se puede obtener llamando varias veces a Object.getPrototypeOf)

forEach, map y similares son propiedades propias del objeto Array.prototype.

A diferencia de las matrices, la cadena de prototipos NodeList tiene el siguiente aspecto:

myNodeList --> NodeList.prototype --> Object.prototype --> null

NodeList.prototype contiene el método item, pero ninguno de los métodos Array.prototype, por lo que no se pueden utilizar en NodeLists.

Fuente: https://developer.mozilla.org/en-US/docs/DOM/NodeList (desplácese hacia abajo hasta ¿Por qué no puedo usar forEach o mapa en una NodeList? )

Si desea usar forEach en NodeList, simplemente copie esa función de Array:

NodeList.prototype.forEach = Array.prototype.forEach;

Eso es todo, ahora puede usarlo de la misma manera que lo haría para Array:

document.querySelectorAll('td').forEach(function(o){
   o.innerHTML = 'text';
});

En ES2015, ahora puede usar el forEachmétodo para la lista de nodos.

document.querySelectorAll('abbr').forEach( el => console.log(el));

Ver el enlace MDN

Sin embargo, si desea usar colecciones HTML u otros objetos tipo matriz, en es2015, puede usar el Array.from()método. Este método toma un objeto iterable o similar a una matriz (incluidas nodeList, colecciones HTML, cadenas, etc.) y devuelve una nueva instancia de matriz. Puedes usarlo así:

const elements = document.getElementsByTagName('abbr');
Array.from(elements).forEach( el => console.log(el));

Como el Array.from()método es intercambiable, puede usarlo en un código es5 como este

var elements = document.getElementsByTagName('abbr');
Array.from(elements).forEach( function(el) {
    console.log(el);
});

Para obtener más información, consulte la página MDN .

Para comprobar la compatibilidad del navegador actual .

O

otra forma de es2015 es utilizar el operador de propagación.

[...document.querySelectorAll('abbr')].forEach( el => console.log(el));

Operador de propagación MDN

Operador de propagación: compatibilidad con el navegador

Mi solución:

//foreach for nodeList
NodeList.prototype.forEach = Array.prototype.forEach;
//foreach for HTML collection(getElementsByClassName etc.)
HTMLCollection.prototype.forEach = Array.prototype.forEach;

NodeList es parte de DOM API. Mire los enlaces de ECMAScript que también se aplican a JavaScript. http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html . NodeList y una propiedad de longitud de solo lectura y una función de elemento (índice) para devolver un nodo.

La respuesta es, tienes que iterar. No hay alternativa. Foreach no funcionará. Trabajo con enlaces de API DOM de Java y tengo el mismo problema.

Compruebe MDN para NodeList.forEach especificación.

NodeList.forEach(function(item, index, nodeList) {
    // code block here
});

En IE, use la respuesta de akuhn :

[].forEach.call(NodeList, function(item, index, array) {
    // code block here
});