Método getElementsByTagName() do objeto HTML DOM Document

Definição e uso

getElementsByTagName() O método retorna a coleção de todos os elementos com o nome de tag especificado.

getElementsByTagName() O método retorna HTMLCollection.

getElementsByTagName() A propriedade é somente leitura.

Nota:getElementsByTagName("*") Retorna todos os elementos do documento.

HTMLCollection

HTMLCollection É uma coleção semelhante a uma lista de elementos HTML.

Os elementos da coleção podem ser acessados por índice (começando em 0).

length A propriedade retorna o número de elementos na coleção.

Veja também:

Método getElementById()

Método getElementsByClassName()

Método querySelector()

Método querySelectorAll()

Objeto HTMLCollection

Exemplo

Exemplo 1

Obter todos os elementos com o nome de标签 "li":

const collection = document.getElementsByTagName("li");

Experimente você mesmo

Exemplo 2

Obter todos os elementos do documento:

const collection = document.getElementsByTagName("*");

Experimente você mesmo

Exemplo 3

Alterar o HTML interno do primeiro elemento <p> do documento:

document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

Experimente você mesmo

Exemplo 4

Número de elementos <li> no documento:

let numb = document.getElementsByTagName("li").length;

Experimente você mesmo

Exemplo 5

Alterar a cor de fundo de todos os elementos <p>:

const collection = document.getElementsByTagName("P");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Experimente você mesmo

Sintaxe

document.getElementsByTagName(tagName)

Parâmetros

Parâmetros Descrição
tagName Obrigatório. O nome da tag do elemento.

Retorno

Tipo Descrição
Objeto

Objeto HTMLCollection.

Conjunto de elementos com o nome de tag especificado.

A ordenação é feita conforme a ordem de aparecimento dos elementos no documento.

Detalhes técnicos

Este método retornará um objeto NodeList (que pode ser tratado como um array de leitura), que contém todos os nós Element com o nome especificado no documento, na ordem em que aparecem no documento de origem.

O objeto NodeList é 'vivo', ou seja, se elementos com o mesmo nome forem adicionados ou removidos do documento, seu conteúdo será atualizado automaticamente.

Os documentos HTML não diferenciam maiúsculas e minúsculas, então pode usar qualquer forma de escrita para especificar tagName，ele combina com todas as tags com o mesmo nome no documento, independentemente da forma de escrita maiúscula ou minúscula usada no documento de origem. Mas os documentos XML diferenciam maiúsculas e minúsculas,tagName Apenas combina com tags cujos nomes na documentação de origem sejam exatamente iguais em termos de nome e caixa.

Dica:A interface Element define um método homônimo, que só pesquisa a subárvore do documento. Além disso, a interface HTMLDocument define Método getElementByName()，ela pesquisa elementos com base no valor da propriedade name (não no nome da tag).

Suporte do navegador

document.getElementsByTagName() É uma característica do DOM Level 1 (1998).

Todos os navegadores suportam:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 9-11 Suporte Suporte Suporte Suporte

Páginas relacionadas

Manual de referência do JavaScript：element.getElementsByTagName()

Tutorial de JavaScript：Lista de Nós do HTML DOM do JavaScript