NodeList
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 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 |
---|
DOM Standard # interface-nodelist |
Compatibilidade com navegadores
BCD tables only load in the browser