sábado, 24 de outubro de 2009

Como modificar uma página com JavaScript

Tag <script>

Algumas vezes, precisamos modificar o conteúdo de uma página dinamicamente. É aí que entra o JavaScript (lembrando que não é a única linguagem que pode ser usada). Aprenda neste tutorial como identificar elementos de uma página, através de ids, classes e tipo de tag, ler e modificar seus atributos, e ler e modificar seus conteúdos.



Como identificar elementos

Antes que se possa fazer qualquer coisa com uma página, e necessário identificar os elementos desejados. Para isso, pode-se usar três funções DOM: getElementById(), getElementsByClassName() e getElementsByTagName().

Como identificar elementos por id

Para identificar um elemento por id, usa-se a função getElementById().

Modelo:

nome_da_variável = document.getElementById('nome_da_id');

Exemplo:

var id1 = document.getElementById('id1');

A variável que recebe o valor da função, também recebe uma ligação entre ela e o elemento da id. Assim, qualquer alteração na variável é refletida no elemento, e vice-e-versa.

Como identificar elementos por classe

Para identificar elementos por classe, usa-se a função getElementsByClassName().

Modelo:

nome_da_variável = document.getElementsByClassName('nome_da_classe');

Exemplo:

var classe1 = document.getElementsByClassName('classe1');

Pela natureza das classes, a variável recebe uma lista de elementos com a classe especificada, ao invés de apenas um elemento, como no caso das ids. Note também o “s” depois de “getElement”. Assim, deve-se examinar elemento por elemento, usando um indexador, e a variável length como uma referência da quantidade de elementos daquela classe. Exemplo:

var classe1 = document.getElementsByClassName('classe1');

alert(classe1.length); // Quantidade de elementos com esta classe
alert(classe1[0].innerHTML); // Primeiro elemento da lista

Como identificar elementos por tipo de tag

Para identificar elementos por tipo de tag, usa-se a função getElementsByTagName().

Modelo:

nome_da_variável = document.getElementsByTagName('tipo_da_tag');

Exemplo:

var tagP = document.getElementsByTagName('p'); // Recebe uma lista de elementos do tipo “parágrafo”

Como as classes, pode haver mais de um elemento com o tipo de tag especificado. Assim, deve-se examinar elemento por elemento, usando um indexador, e a propriedade length como uma referência da quantidade de elementos daquela tipo de tag. Exemplo:

var tagP = document.getElementsByTagName('p');

alert(tagP.length); // Quantidade de elementos deste tipo de tag
alert(tagP[0].innerHTML); // Primeiro elemento da lista

Como manipular os atributos dos elementos

Depois de identificado um elemento, pode-se acessar e modificar seus atributos. Com exceção de dois atributos, todos os atributos têm o mesmo nome, tanto em HTML quanto em JavaScript. Exemplo:

var links = document.getElementsByTagName('a'); // Recebe uma lista com todos os hiperlinks na página

for (i = 0; i < links.length; i++)
{
   links[i].href = 'http://ricvelozo.blogspot.com/'; // Modifica o atributo “href”
}

O exemplo acima modifica os endereços de todos os hiperlinks na página, para “http://ricvelozo.blogspot.com/”.

Os dois atributos citados um pouco acima, possuem seus nomes diferentes em JavaScript. São eles: classe = className e tipo da tag = tagName. Esses dois atributos também podem ser modificados como todos os outros.

Como manipular os conteúdos dos elementos

Alguns tipos de elementos possuem “crianças” (o conteúdo do elemento), como <a>, <div>, <p>, <pre> e muitos outros. A forma mais fácil de acessar seu conteúdo é usando a propriedade innerHTML. Entretanto, essa propriedade não faz parte do padrão DOM. Ela foi criada pela Microsoft, mas a maioria, se não todos os navegadores recentes, suportam sem problema algum. Essa propriedade passou a pertencer ao padrão HTML5. Exemplo:

var ps = document.getElementsByTagName('p'); // Recebe uma lista com todos os parágrafos na página

for (i = 0; i < ps.length; i++)
{
   ps[i].innerHTML = 'Este parágrafo foi modificado através de JavaScript.'; // Modifica o conteúdo do parágrafo
}

O exemplo acima identifica todos os elementos do tipo parágrafo, e modifica seus conteúdos dinamicamente para “Este parágrafo foi modificado através de JavaScript.”.

Alguns elementos podem conter outros elementos, e esses também podem ser enumerados. Veja o exemplo:

var ps = document.getElementsByTagName('p');

for (i = 0; i < ps.length; i++)
{
   var pFilhos = ps[i].getElementsByTagName('i'); // Pega todos os <i> dentro dos <p>

   for (j = 0; j < pFilhos.length; j++)
   {
      pFilhos[i].innerHTML = 'Isto é um texto em itálico.';
   }
}

Como manipular os estilos dos elementos

Também é possível modificar os estilos (CSS) dos elementos. Isso é feito através do atributo style. Exemplo:

var ps = document.getElementsByTagName('p'); // Recebe uma lista com todos os parágrafos na página

for(i = 0; i < ps.length; i++)
{
   ps[i].style.color = 'blue'; // Modifica a cor do parágrafo
}

Se um comando CSS possui um hífen, seu correspondente em JavaScript possui a primeira letra depois do hífen maiúscula, tudo junto e sem hífen. Tome como exemplo o comando CSS background-color:

var ps = document.getElementsByTagName('p'); // Recebe uma lista com todos os parágrafos na página

for(i = 0; i < ps.length; i++)
{
   ps[i].style.backgroundColor = 'blue'; // Modifica a cor de fundo do parágrafo (background-color)
}

Conclusão

Através da combinação dessas três funcionalidades básicas de DHTML, pode-se tornar as páginas muito mais ricas, e adaptáveis ao usuário. Esse artigo, por exemplo, é modificado automaticamente para colorir os códigos de exemplo, através de um script que eu mesmo fiz enquanto aprendia os básicos de JavaScript.

Postagens relacionadas

0 comentários:

Postar um comentário