Listas de Nós HTML DOM

Objeto NodeList do HTML DOM

NodeList é uma lista de nós extraída do documento (conjunto).

Objeto

Objetos NodeList são quase idênticos aos objetos HTMLCollection. Se usar getElementsByClassName()

certos (navegadores antigos) retornam NodeList em vez de HTMLCollection. Todos os navegadores retornam NodeList para o método childNodes

A maioria dos navegadores retorna NodeList para a propriedade querySelectorAll() O método retorna um objeto NodeList.

O código a seguir选取o documento de todos os nós <p>:

Exemplo

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

}

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

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

y = myNodeList[1];

Nota:O índice começa em 0.

Tamanho do NodeList do HTML DOM

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

Exemplo

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

}

Explicação do exemplo:

  • Criar uma lista de todos os elementos <p>
  • Exibir o comprimento da lista

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

Exemplo

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

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

}

Experimente você mesmo

Diferença entre HTMLCollection e NodeList

HTMLCollection (capítulo anterior) é uma coleção de elementos HTML.

NodeList é uma coleção de nós de documento.

Objetos NodeList e HTMLCollection são listas (conjuntos) de objetos listas (conjuntos) semelhantes a arrays.

Eles têm um número definido de itens na lista (conjunto). length Atributo.

Ambos podem ser acessados por índice (0, 1, 2, 3, 4, ...) como um array.

Acesso aos itens HTMLCollection, pode ser feito através de seus nomes, id ou índice.

Acesso aos itens NodeList, apenas através de seus números de índice.

Apenas NodeList pode conter nós de atributo e nós de texto.

A lista de nós não é um array!

A lista de nós parece um array, mas não é.

Você pode percorrer a lista de nós e referenciar seus nós como um array.

No entanto, você não pode usar métodos de array em listas de nós, como valueOf()、push()、pop() ou join().