Manual de Referência do NodeList do DOM HTML

Diferenças entre HTMLCollection e NodeList

NodeList é uma coleção de objetos de nó semelhante a uma lista (array).

Os nós na NodeList podem ser acessados por meio de índices (começando em 0).

Ambos têmRetorna o número de nós na NodeList.

NodeList vs. HTMLCollection

NodeList com HTMLCollection Praticamente o mesmo.

Veja as instruções abaixo na página.

Quem retorna NodeList?

Atributo childNodes

Método querySelectorAll()

Método getElementsByName()

Atributos e métodos

Os seguintes atributos e métodos podem ser usados na NodeList:

Nome Descrição
entries() Retornar iteradores com pares de chave/valor da lista.
forEach() Executar uma função de callback para cada nó na lista.
item() Retorna o nó na posição especificada.
keys() Retornar iteradores usando as chaves da lista.
length Retorna o número de nós na NodeList.
values() Retornar iteradores usando os valores da lista.

instancias

Escolher todos os <p> Nó:

const myNodeList = document.querySelectorAll("p");

Os elementos na NodeList podem ser acessados por meio de números de índice.

Para acessar o segundo nó <p>, você pode escrever:

myNodeList[1]

}

Atenção:O índice começa em 0.

Tamanho da Lista de Nós do DOM HTML

length A propriedade define o número de nós na lista de nós:

Exemplo 1

myNodelist.length

}

Quando você deseja percorrer os nós na lista de nós:length A propriedade é muito útil:

Exemplo 2

Mudar a cor de todos os elementos <p> na lista de nós:

const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
}

}

Experimente você mesmo

Não é um array

A NodeList não é um array!

A NodeList pode parecer um array, mas na verdade não é.

Você pode percorrer a NodeList e usar referências de índice para seus nós.

Mas você não pode usar métodos de Array em NodeList, como push(), pop() ou join().

Diferenças entre HTMLCollection e NodeList NodeList e HTMLcollection

Muito semelhantes.

Ambos são conjuntos de nós (elementos) extraídos do documento, semelhantes a arrays. Os nós podem ser acessados por meio de índices. O índice começa em 0. Ambos têmlength

que retorna o número de elementos (conjuntos) na lista. A propriedade lengthA HTMLCollection éum conjunto. O nó de elemento do documento

A NodeList éNó de documentoconjunto de (nós de elemento, nó de atributo e nó de texto).

Os itens da HTMLCollection podem ser acessados através de seus nomes, id ou números de índice.

Os itens da NodeList só podem ser acessados através de seus números de índice.

A HTMLCollection sempre é umEm tempo realconjunto. Por exemplo: se você adicionar um elemento <li> à lista no DOM, a lista na HTMLCollection também mudará.

A NodeList geralmente é umEstáticaconjunto. Por exemplo: se você adicionar um elemento <li> à lista no DOM, a lista na NodeList não mudará.

getElementsByClassName() e getElementsByTagName() O método retorna uma HTMLCollection em tempo real.

querySelectorAll() O método retorna uma NodeList estática.

childNodes A propriedade retorna uma NodeList em tempo real.

lista de nós em tempo real

Em alguns casos, a NodeList éEm tempo real：As alterações no DOM atualizam a NodeList.

childNodes O método retorna uma NodeList em tempo real.