Objetos NodeList são coleções de nodos semelhantes aos objetos retornados pelos métodos {{domxref("Node.childNodes")}} e {{domxref("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 {{ Glossary("DOM") }} reflete nos elementos da coleção. Por exemplo, {{ domxref("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 {{ Glossary("DOM") }} não afeta o conteúdo da coleção. {{domxref("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.
NodeList.null se o índice for inválido; pode ser usado como uma alternativa a nodeList[idx] (que retorna undefined quando idx é inválido).NodeList.É 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 {{ domxref("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, {{ domxref("NodeList.forEach()", "forEach()") }}, bem como {{ domxref("NodeList.entries()", "entries()") }}, {{ domxref("NodeList.values()", "values()") }}, e {{ domxref("NodeList.keys()", "keys()") }}
Há também um jeito compatível com o Internet Explorer de usar {{ jsxref("Array.forEach()", "Array.prototype.forEach") }} para iteração.
var list = document.querySelectorAll( 'input[type=checkbox]' );
Array.prototype.forEach.call(list, function (item) {
item.checked = true;
});
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 {{ jsxref("Array.forEach()", "Array.prototype.forEach") }}.
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}} | {{ Spec2('DOM WHATWG') }} | |
| {{SpecName('DOM4', '#interface-nodelist', 'NodeList')}} | {{ Spec2('DOM4') }} | |
| {{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM3 Core') }} | |
| {{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM2 Core') }} | |
| {{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM1') }} | Initial definition. |
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-dataand send us a pull request.
{{Compat("api.NodeList")}}