Eu estava trabalhando em um pequeno script para alterar <abbr>o texto interno dos elementos, mas descobri que nodelistnão tem um forEachmétodo. Eu sei que nodelistnão herda de Array, mas não parece que forEachseria um método útil? Existe um problema de implementação particular eu não tenho conhecimento de que impede a adição forEachde nodelist?

Nota: Estou ciente de que o Dojo e o jQuery têm forEach, de alguma forma, suas listas de nós. Não posso usar nenhum deles devido a limitações.

NodeList agora tem forEach () em todos os principais navegadores

Consulte nodeList forEach () em MDN .

Resposta original

Nenhuma dessas respostas explica por que NodeList não herda de Array, permitindo que ele tenha forEache todo o resto.

A resposta é encontrada neste tópico es-discuss . Resumindo, ele quebra a web:

O problema era o código que assumia incorretamente que instanceof significava que a instância era um Array em combinação com Array.prototype.concat.

Havia um bug no Closure Library do Google que fazia com que quase todos os aplicativos do Google falhassem devido a isso. A biblioteca foi atualizada assim que foi encontrada, mas ainda pode haver código por aí que faz a mesma suposição incorreta em combinação com concat.

Ou seja, algum código fez algo como

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

No entanto, concattratará arrays "reais" (não instância de Array) de maneira diferente de outros objetos:

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

então isso significa que o código acima quebrou quando xera um NodeList, porque antes ele desceu o doSomethingElseWith(x)caminho, enquanto depois ele desceu o otherArray.concat(x)caminho, o que fez algo estranho, já que xnão era um array real.

Há algum tempo surgiu a proposta de uma Elementsclasse que fosse uma verdadeira subclasse de Array, e seria usada como "a nova NodeList". No entanto, isso foi removido do padrão DOM , pelo menos por enquanto, uma vez que ainda não era viável de implementar por uma variedade de razões técnicas e de especificação.

Você pode fazer

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

    // Your code here.

} );

Você pode considerar a criação de uma nova matriz de nós.

  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 é apenas uma lista / array de referências de nós que estamos criando aqui, sem nós duplicados.

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

Nunca diga nunca, estamos em 2016 e o NodeListobjeto implementou um forEachmétodo no Chrome mais recente (v52.0.2743.116).

É muito cedo para usá-lo em produção porque outro navegador não suporta isso ainda (FF 49 testado), mas acho que isso será padronizado em breve.

Em suma, é um conflito de design para implementar esse método.

Do MDN:

Por que não posso usar forEach ou map em uma NodeList?

NodeList são usados ​​de forma muito parecida com arrays e seria tentador usar métodos Array.prototype neles. No entanto, isso é impossível.

JavaScript possui um mecanismo de herança baseado em protótipos. As instâncias de array herdam métodos de array (como forEach ou map) porque sua cadeia de protótipo se parece com o seguinte:

myArray --> Array.prototype --> Object.prototype --> null (a cadeia de protótipo de um objeto pode ser obtida chamando várias vezes Object.getPrototypeOf)

forEach, map e similares são propriedades próprias do objeto Array.prototype.

Ao contrário dos arrays, a cadeia de protótipos NodeList se parece com o seguinte:

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

NodeList.prototype contém o método do item, mas nenhum dos métodos Array.prototype, portanto, eles não podem ser usados ​​em NodeLists.

Fonte: https://developer.mozilla.org/en-US/docs/DOM/NodeList (role para baixo até Por que não posso usar forEach ou mapear em um NodeList? )

Se você quiser usar forEach em NodeList, apenas copie essa função do Array:

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

Isso é tudo, agora você pode usá-lo da mesma maneira que faria para Array:

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

No ES2015, agora você pode usar o forEachmétodo para o nodeList.

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

Veja o link MDN

No entanto, se você quiser usar coleções HTML ou outros objetos semelhantes a array, em es2015, você pode usar o Array.from()método. Este método pega um objeto semelhante a um array ou iterável (incluindo nodeList, coleções HTML, strings, etc.) e retorna uma nova instância de Array. Você pode usá-lo assim:

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

Como o Array.from()método é shimmable, você pode usá-lo em código es5 como este

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

Para obter detalhes, consulte a página MDN .

Para verificar o suporte do navegador atual .

OU

outra maneira es2015 é usar o operador de propagação.

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

Operador de spread MDN

Spread Operator - Suporte de navegador

Minha solução:

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

NodeList faz parte da API DOM. Observe as ligações ECMAScript que também se aplicam ao JavaScript. http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html . O nodeList e uma propriedade de comprimento somente leitura e função de item (índice) para retornar um nó.

A resposta é: você precisa iterar. Não ha alternativa. Foreach não funcionará. Eu trabalho com ligações Java DOM API e tenho o mesmo problema.

Verifique o MDN para obter a especificação NodeList.forEach .

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

No IE, use a resposta de akuhn :

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