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.
Clique aqui e aprenda a desenvolver com jQuery!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 listaComo 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 listaComo 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.
0 comentários:
Postar um comentário