JavaScript - getElementsByTagName()
Referência prática da função getElementsByTagName()
Todos os elementos HTML podem ser selecionados usando-se o método getElementsByTagName()
do objeto Document. O
retorno da função é um objeto semelhante a um array somente para leitura contendo os objetos Element conforme
definido no parâmetro.
Para buscar todas as tags span
de um documento escrevemos:
var spans = document.getElementsByTagName('span');
Para buscar todos os parágrafos de um documento escrevemos:
var paragrafos = document.getElementsByTagName('p');
Para buscar todos os elementos da página, basta passar como parãmetro o asterisco "*"
:
var todosElementos = document.getElementsByTagName("*");
Também serve para classe Element
A classe Element também define um método getElementsByTagName()
. Ele funciona da mesma maneira que a versão de Document,
mas seleciona apenas os elementos descendentes do elemento no qual é chamado.
Considere o HTML abaixo.
<ul>
<li>primeiro item</li>
<li>segundo item</li>
<li>terceiro item</li>
</ul>
<ul>
<li>outro primeiro item</li>
<li>outro segundo item</li>
<li>outro terceiro item</li>
</ul>
O código abaixo selecionaria todas as listas (ul
) do documento.
//
// Document
//
var uls = document.getElementsByTagName("ul");
O código abaixo selecionaria todas os itens de todas as listas do documento, em nosso caso, os 6 itens (3 da primeira lista mais 3 da segunda lista).
//
// Document
//
var lis = document.getElementsByTagName("li");
O código retornará apenas os 3 itens da primeira lista.
//
// Element
//
var lisPrimeiraLista = uls[0].getElementsByTagName("li");
O código retornará apenas os 3 itens da segunda lista.
//
// Element
//
var lisSegundaLista = uls[1].getElementsByTagName("li");