MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

NodeList

Objetos NodeList são coleções de nodos semelhantes aos objetos retornados pelos métodos Node.childNodes e document.querySelectorAll().

Apesar de NodeList não ser um Array, é possível ser iterada usando o método forEach(). Muitos navegadores antigos ainda não implementaram este método.

Em alguns casos, NodeList é uma coleção viva, ou seja, toda alteração feita no DOM reflete nos elementos da coleção. Por exemplo, Node.childNodes é uma coleção viva:

var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // let's assume "2"
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // should output "3"

Já em outros casos NodeList é um coleção estática, significando que toda alteração subsequente ao DOM não afeta o conteúdo da coleção. document.querySelectorAll() é um exemplo de método que retorna uma NodeList estática.

É aconselhável lembrar dessa distinção quando for escolher como iterar sobre os items de uma NodeList, e como você faz o cache do tamanho dessa lista.

Propriedades

NodeList.length
A quantidade de nodos na NodeList.

Métodos

NodeList.item()
Retorna um item da lista pelo índice, ou null se o índice for inválido; pode ser usado como uma alternativa a nodeList[idx] (que retorna  undefined quando idx é inválido).
NodeList.entries()
Retorna um iterador que permite passar por todos os pares chave/valor contidos no objeto.
NodeList.forEach()
Executa uma função recebida uma vez para cada elemento no NodeList.
NodeList.keys()
Retorna um iterador que permite passar por todas as chaves dos pares chave/valor contidos no objeto.
NodeList.values()
Retorna um iterador que permite passar por todos os valores dos pares chave/valor contidos no objeto.

Exemplo

É possivel iterar sobre os items de um NodeList usando:

for (var i = 0; i < myNodeList.length; ++i) {
  var item = myNodeList[i];  // Calling myNodeList.item(i) isn't necessary in JavaScript
}

Não caia na tentação de usar for...in ou for each...in para enumerar os items de uma lista, já que também serão enumeradas as propriedades length e item da NodeList, o que causará erros se o seu script assumir que processará apenas objetos element. Não esquecendo que for..in não garante a iteração nas propriedades de forma ordenada.

for...of iterará sobre os objetos da NodeList de maneira correta:

var list = document.querySelectorAll( 'input[type=checkbox]' );
for (var item of list) {
  item.checked = true;
}

Navegadores modernos suportam métodos de iteração, forEach(), bem como entries(), values(), e keys()

Há também um jeito compatível com o Internet Explorer de usar Array.prototype.forEach para iteração.

var list = document.querySelectorAll( 'input[type=checkbox]' );
Array.prototype.forEach.call(list, function (item) {
  item.checked = true;
});

NodeList prototype

Você também pode adicionar protótipos para NodeList:

var elements = document.querySelectorAll(".suggestions"); 

NodeList.prototype.addEventListener = function(event, func) {
    this.forEach(function(content, item) {
       content.addEventListener(event, func);
    });
}

function log() {
    console.log(this, " was clicked");
}

elements.addEventListener("click", log);
//or
elements.addEventListener("click", function() {
    console.log(this, "  awas clicked");
});
// output from both will be element was clicked the element would be HTML Element

Para mais informações sobre forEach veja Array.prototype.forEach.

Especificações

Specification Status Comment
DOM
The definition of 'NodeList' in that specification.
Padrão em tempo real  
DOM4
The definition of 'NodeList' in that specification.
Recomendação  
Document Object Model (DOM) Level 3 Core Specification
The definition of 'NodeList' in that specification.
Recomendação  
Document Object Model (DOM) Level 2 Core Specification
The definition of 'NodeList' in that specification.
Recomendação  
Document Object Model (DOM) Level 1 Specification
The definition of 'NodeList' in that specification.
Recomendação Initial definition.

Compatibilidade nos navegadores

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
entries(), keys(), values(), forEach() 51 Não suportado 50 (50) Não suportado 38 10 (maybe prior)
Feature Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
entries(), keys(), values(), forEach() ? ? ? 50.0 (50) ? Não suportado ? 10 (maybe prior) 51

Etiquetas do documento e colaboradores

Etiquetas: 
 Colaboradores desta página: fernandosavio
 Última atualização por: fernandosavio,