Curso iMasters - Web Sites com Ajax - Capítulo 2

JavaScript

Método getElementsByTagName

Ao contrário do método que conhecemos anteriormente, o getElementsByTagName retorna diversos objetos com a tag específicada no método. Portanto, ao invés de informarmos um atributo e termos como retorno um único objeto, informarmos uma tag e temos todas aquelas que constam na página em questão.

Considere a seguinte situação: temos uma página em que todos os links não contém sublinhados para destacá-los e precisamos alterar, via script, a forma como esses links são apresentados, ou seja, precisamos que esses links tenham o estilo sublinhado.

Para resolvermos essa questão devemos proceder assim: identificar todos os links contidos na página e acrescentar-lhes um estilo como text-decoration underline. Mas, como fazer isto?

Vamos com calma! Sabemos que o método getElementsByTagName seleciona todas as tags de uma determinada página, ou seja, ele seria a solução para selecionarmos todos os links (tag a). Com eles (links) "em mãos", basta adicionarmos um estilo que lhes conceda o sublinhado desejado.

Vejamos o exemplo acima em ação na página Método: getElementsByTagName.

Agora vamos observar o script que solucionou nosso problema:


			function changeStyleLink() {

			 var links = document.getElementsByTagName('a');

			 for(var x = 1; x < links.length; x++) {

			  var _link = links[x];

			  _link.style.textDecoration = 'underline';

			 }

			}

Vamos entendê-lo.

Primeiramente criamos uma função chamada changeStyleLink(), a qual é invocada através do evento onclick no link Sublinhar os links contidos nesta página. Vamos entendê-la:

A variável links armazena todos os links contidos na página através do método getElementsByTagName; a esse método foi informada a tag a.

Após, iniciamos um loop com o for e instanciamos a variável X informando-lhe o valor inicial como sendo 1. Essa variável será menor que o total de links contidos na página (links.length) e utilizamos também um incremento (++) na variável.

Criamos a variável _link que terá como valor todos os links contidos na página, ou melhor, com a exceção do primeiro link que é o responsável por chamar a função. Isto ocorre porque informamos à variável X o valor inicial de 1 no loop e o link que invoca a função é representado pelo número 0 (zero), exatamente por ser o primeiro a aparecer na página. Dessa forma, a variável _link, durante o loop, terá os seguintes valores: links[1], links[2], links[3], links[4], ...

Para finalizar, utlizamos o método style (falaremos sobre ele adiante) para adicionar aos links o sublinhado desejado. Por fim, dizemos que underline será o valor da propriedade textDecoration porque é esse valor que adiciona o sublinhado que desejávamos.

Observe que a propriedade text-decoration das CSS é representado por textDecoration. Portanto, segue uma dica: sempre que desejar utilizar uma propriedade CSS e esta conter esta estrutura nome-outronome, basta retirar o hífen e colocar em maiúsculo a primeira letra do segundo nome.