Método getElementsByTagName() do HTML DOM Element

Definição e uso

getElementsByTagName() O método retorna uma coleção de elementos filhos com o nome de tag especificado, como um objeto NodeList.

Dica:Valor do parâmetro "*" Retorna todos os elementos filhos do elemento.

Veja também:

Método getElementsByClassName()

Método querySelector()

Método querySelectorAll()

NodeList

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

Você pode acessar os nós na lista pelo índice (subíndice). O índice começa em 0.

Propriedade lengthRetorna o número de nós na lista.

Exemplo

Exemplo 1

Mudar o conteúdo HTML do primeiro elemento <li> da lista:

const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";

Experimente você mesmo

Exemplo 2

Número de elementos <p> no "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;

Experimente você mesmo

Exemplo 3

Mudar o tamanho da fonte do segundo elemento <p> no "myDIV":

const element = document.getElementById("myDIV");
element.getElementsByTagName("p")[1].style.fontSize = "24px";

Experimente você mesmo

Exemplo 4

Mudar a cor de fundo de todos os elementos <p> no "myDIV":

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

Experimente você mesmo

Exemplo 5

Mudar a cor de fundo do quarto elemento (índice 3) no "myDIV":

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

Experimente você mesmo

Exemplo 6

Use o parâmetro "*" para alterar a cor de fundo de todos os elementos dentro de "myDIV":

const div = document.getElementById("myDIV");
const nodes = div.getElementsByTagName("*");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

Experimente você mesmo

Sintaxe

element.getElementsByTagName(tagname)

Parâmetro

Parâmetro Descrição
tagname Obrigatório. O nome da tag do subelemento.

Retorno

Tipo Descrição
NodeList

Elementos filhos de um elemento com o nome de tag dado.

Os elementos são ordenados pela ordem em que aparecem no código-fonte.

Detalhes técnicos

getElementsByTagName() O método varre os descendentes do elemento especificado, retornando um array (na verdade um objeto NodeList) de Elementos, representando todos os elementos do documento que possuem o nome de tag especificado. A ordem dos elementos no array é a mesma que a ordem em que eles aparecem no código-fonte do documento.

Atenção

Interface DocumentTambém define Método getElementsByTagName()，ele é semelhante a este método, mas percorre todo o documento, em vez de percorrer os descendentes de um elemento.

Não confunda este método com Método getElementsByName() do HTMLDocument Confundir, o último é baseado no valor da propriedade name do elemento para encontrar elementos, em vez de se basear no nome da tag dos elementos.

Suporte do navegador

Todos os navegadores suportam element.getElementsByTagName():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte Suporte