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 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 anodeList[idx]
(que retornaundefined
quandoidx
é 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. |
Obsoleto | |
Document Object Model (DOM) Level 3 Core Specification The definition of 'NodeList' in that specification. |
Obsoleto | |
Document Object Model (DOM) Level 2 Core Specification The definition of 'NodeList' in that specification. |
Obsoleto | |
Document Object Model (DOM) Level 1 Specification The definition of 'NodeList' in that specification. |
Obsoleto | Initial definition. |
Compatibilidade nos navegadores
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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
NodeList | Chrome Full support Yes | Edge Full support Yes | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
entries | Chrome Full support 51 | Edge Full support 16 | Firefox Full support 50 | IE No support No | Opera Full support 38 | Safari Full support 10 | WebView Android Full support 51 | Chrome Android Full support 51 | Firefox Android Full support 50 | Opera Android ? | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 |
forEach | Chrome Full support 51 | Edge Full support 16 | Firefox Full support 50 | IE No support No | Opera Full support 38 | Safari Full support 10 | WebView Android Full support 51 | Chrome Android Full support 51 | Firefox Android Full support 50 | Opera Android Full support 41 | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 |
item | Chrome Full support 1 | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
keys | Chrome Full support 51 | Edge Full support 16 | Firefox Full support 50 | IE No support No | Opera Full support 38 | Safari Full support 10 | WebView Android Full support 51 | Chrome Android Full support 51 | Firefox Android Full support 50 | Opera Android ? | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 |
length | Chrome Full support 1 | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
values | Chrome Full support 51 | Edge Full support 16 | Firefox Full support 50 | IE No support No | Opera Full support 38 | Safari Full support 10 | WebView Android Full support 51 | Chrome Android Full support 51 | Firefox Android Full support 50 | Opera Android ? | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown