5

Sei que no JavaScript temos arrays comuns, que, a maioria das linguagens possuem.

Mas as minhas dúvidas são em relação a um nodeList no JavaScript.

  1. O que é um objeto nodeList no JavaScript?
  2. Como posso acessar elementos de um nodeList?
  3. Qual a diferença entre um array convencional e um nodeList?
  4. Qual a sua utilidade?
3
  • Não entendi o porque do downvote. Poderia colocar nos comentários por favor? Para que eu possa melhorar a pergunta, se esse é o caso, ou, se for uma duplicata. 10/10/2018 às 12:10
  • 1
    Resumindo, é uma lista de nós (sejam eles elementos, textos ou até comentários), da mesma for que uma array comum, a diferença está em NodeList.prototype e Array.prototype, a utilidade é que é uma array especial para uma função específica, mas dificilmente você irá criar um deles diretamente
    – Costamilam
    10/10/2018 às 12:28
  • 1
    Dando um exemplo comum do ponto 3 não consegue utlizar map num NodeList ao passo que num array consegue. Algo como document.querySelectorAll("li").map(x => x.textContent) para obter um array de textos dos vários <li> não funciona porque não é um array.
    – Isac
    10/10/2018 às 13:16

2 Respostas 2

10

NodeList é uma classe interna do JavaScript que possui a seguinte interface:

[Exposed=Window]
interface NodeList {
  getter Node? item(unsigned long index);
  readonly attribute unsigned long length;
  iterable<Node>;
};

Isto é, um objeto de NodeList possuirá:

  • Um método item que recebe um argumento index numérico e retorna um elemento Node;
  • Um atributo length numérico;
  • Um iterável de elementos Node;

Quando se tem uma estrutura baseada em árvore, o nó Node é o elemento básico da estrutura. No caso do JavaScript, o DOM é uma árvore de nós. A classe NodeList representa um conjunto desses nós, sendo retornado, por exemplo, pelas funções document.querySelectorAll ou o atributo element.childNodes.

Você pode acessar um dos elementos da lista através do método item identificando o índice que deseja acessar ou iterar sobre o objeto.

const lis = document.querySelectorAll('li');

// Acessando via método item:
console.log( lis.item(0) );

// Iterando sobre o objeto:
for (let li of lis) {
  console.log(li);
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

O NodeList, embora se assemelhe a um array, não possui equivalências. Um é uma coleção de nós, outro é um... array. O NodeList, por exemplo, sempre representará uma coleção de elementos do tipo Node, ordenados conforme suas respectivas posições dentro da árvore e é imutável, você não é capaz de adicionar um novo elemento a um NodeList - precisa alterar a árvore diretamente. Já um array é um conjunto de valores sem relação direta entre si.

A utilidade dele é intrínseca em sua definição: representar, como objeto, uma coleção de nós na forma de lista.

Outras leituras relacionadas:

8

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .