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");

Comentários

comments powered by Disqus