NodeList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Nota: 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 itens 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
DOM Standard # interface-nodelist

Compatibilidade com navegadores

BCD tables only load in the browser