O que é um objeto nodeList no JavaScript?
Como o próprio nome diz é uma lista nós do DOM. Documentação. Isto inclui os atributos e os textos do nós.
Como posso acessar elementos de um nodeList?
Como qualquer coleção de dados, acessa cada nó através de um índice para o elemento que deseja. Uma das formas mais comuns de realizar isto é com um for
.
var list = document.querySelectorAll('input[type=checkbox]');
for (var checkbox of list) {
checkbox.checked = true;
}
Quase tudo de um array funciona nele, mas é uma coleção com outra estrutura. E ele não provê acesso em forma de dicionário, portanto não pode acessar pelos nomes dos elementos encontrados no elemento selecionado.
document.querySelectorAll("p")[1] //pega o segundo elemento da lista de nós de p
Coloquei no GitHub para referência futura.
É possível convertê-lo para um Array
e acessá-lo desta forma. O array será estático, ou sejam os dados não alteram. O nodeLIst
é vivo, então por ser uma referência direta para o DOM, conforme o DOM vaio sendo modificado pela página o conteúdo encontrado ali sofre reflexo dessas alterações do DOM. Nem todas iterações com uma variável que tenha um nodeList
serão iguais.
Qual a diferença entre um array convencional e um nodeList?
Um array tem todas posições em sequência
Qual a sua utilidade?
Ele armazena uma coleção de elementos do DOM selecionados por uma das funções da API do browser selecionando o que deseja. Aí você pode fazer várias manipulações em cada um desses elementos. Geralmente ele é útil quando precisa fazer operações em todos os elementos ou pelo menos uma parcela deles. Entenda que manipular não precisa ser mexer, pode ser ser só verificar. O que pode fazer individualmente com um elemento neste caso pode fazer de forma geral.
A função mais comum que retorna esta coleção é a document.querySelectorAll()
. A propriedade Node.childNodes
também tem uma referência para isto.
NodeList.prototype
eArray.prototype
, a utilidade é que é uma array especial para uma função específica, mas dificilmente você irá criar um deles diretamentemap
numNodeList
ao passo que num array consegue. Algo comodocument.querySelectorAll("li").map(x => x.textContent)
para obter um array de textos dos vários<li>
não funciona porque não é um array.