Listas de nós JavaScript HTML DOM
O objeto HTML DOM NodeList
Um NodeList
objeto é uma lista (coleção) de nós extraídos de um documento.
Um NodeList
objeto é quase o mesmo que um HTMLCollection
objeto.
Alguns navegadores (mais antigos) retornam um objeto NodeList em vez de um HTMLCollection para métodos como getElementsByClassName()
.
Todos os navegadores retornam um objeto NodeList para a propriedade childNodes
.
A maioria dos navegadores retorna um objeto NodeList para o método querySelectorAll()
.
O código a seguir seleciona todos os <p>
nós em um documento:
Exemplo
const myNodeList = document.querySelectorAll("p");
Os elementos no NodeList podem ser acessados por um número de índice.
Para acessar o segundo nó <p> você pode escrever:
myNodeList[1]
Nota: O índice começa em 0.
Comprimento da lista de nós HTML DOM
A length
propriedade define o número de nós em uma lista de nós:
Exemplo
myNodelist.length
A length
propriedade é útil quando você deseja percorrer os nós em uma lista de nós:
Exemplo
Altere a cor de todos os elementos <p> em uma lista de nós:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
A diferença entre um HTMLCollection e um NodeList
Um HTMLCollection
(capítulo anterior) é uma coleção de elementos HTML.
A NodeList
é uma coleção de nós de documentos.
Um NodeList e uma coleção HTML são praticamente a mesma coisa.
Tanto um objeto HTMLCollection quanto um objeto NodeList são uma lista (coleção) de objetos do tipo array.
Ambos possuem uma propriedade de comprimento que define o número de itens na lista (coleção).
Ambos fornecem um índice (0, 1, 2, 3, 4, ...) para acessar cada item como um array.
Itens HTMLCollection podem ser acessados por seu nome, id ou número de índice.
Os itens NodeList só podem ser acessados por seu número de índice.
Somente o objeto NodeList pode conter nós de atributo e nós de texto.
Uma lista de nós não é um array!
Uma lista de nós pode parecer um array, mas não é.
Você pode percorrer a lista de nós e se referir a seus nós como um array.
No entanto, você não pode usar métodos de matriz, como valueOf(), push(), pop() ou join() em uma lista de nós.