Selecionar um elemento com getElement()
Utilizamos a função getElement() de Mootools para selecionar um elemento da página web, que logo poderemos alterar para mudar suas propriedades com outros métodos de Element.Por Miguel Angel Alvarez - Tradução de JML
Publicado em: 31/5/09
Seguimos com o
Manual de Mootools de CriarWeb.com.
Em artigos anteriores estivemos oferecendo as noções mais básicas do módulo Element e vamos continuar com ele.
Deve ter ficado claro até o momento o uso das funções dólar $() e duplo dólar $$(), porque vamos utilizá-las constantemente neste manual. Se não for assim, convém repassar o uso dessas funções nos artigos
Método $() e
Método $$().
Vimos que com essas funções se podia acessar rapidamente a elementos da página através de seus identificadores (atributo id do elemento HTML). Agora vamos ver como acessar a elementos da página que estão dentro de outros. Os elementos que vamos acessar agora não necessitam ter identificadores para poder ser acessados e processados por meio de Mootools. Para isso, utilizaremos o método getElement(), de qualquer objeto da classe Element.
O método getElement() pertence à classe Element, sendo assim, temos que invocá-lo sobre uma instância da classe Element, ou seja, um elemento da página. Os elementos podemos consegui-los através do método $().
$("id_de_um_elemento_qualquer").getElement("div");
getElement() recebe como parâmetro o nome de uma etiqueta HTML e devolve o primeiro modelo dessa etiqueta que tiver dentro do elemento onde foi invocado getElement(). Esta explicação pode parecer um pouco retorcida, porém se entenderá assim: na sentença anterior, getElement() devolverá a primeira etiqueta DIV que tiver dentro do elemento com id="id_de_um_elemento_qualquer". De qualquer forma, como costumamos fazer em criarweb.com, vamos ver alguns exemplos de uso de getElement() que irão esclarecer este assunto.
Imaginemos que temos um código HTML como o que segue:
<body>
<ul>
<li>Elemento em uma lista fora do div</li>
<li>Outro elemento fora do div</li>
<li>Elemento <a href="#">com link!</a></li>
</ul>
<div id="capadiv">
<ul>
<li>Lista, elemento 1 <a href="#">link dentro de elemento</a></li>
<li>Lista, elemento 2</li>
<li>Outro elemento</li>
</ul>
<p>
Isto é um parágrafo. Coloco um <a href="#">link dentro do parágrafo</a>
</p>
</div>
<p>Coloco outro parágrafo fora do div</p>
</body>
Como vemos temos um corpo da página, englobado na etiqueta BODY e dentro do mesmo vários elementos ou etiquetas HTML. Vamos agora trabalhar com esta página, simplesmente selecionando alguns destes elementos e alterando suas propriedades, para mudá-los um pouco e assim ver que os selecionamos corretamente.
Para isso, vejamos esta primeira função:
function selecionarParagrafoEnDiv(){
meuParagrafo = $("capadiv").getElement("p");
meuParagrafo.set("html", "Coloco outro texto no parágrafo");
}
Isto o que faz é selecionar o primeiro parágrafo (etiqueta P) que há dentro do elemento com id="capadiv". Podemos ver no código HTML anterior que havia uma camada DIV com esse identificador:
<div id="capadiv>
Dentro contém várias outras etiquetas, entre elas um parágrafo. Sendo assim, selecionamos esse primeiro parágrafo com a sentença:
meuParagrafo = $("capadiv").getElement("p");
Logo, com a seguinte linha alteramos alguma das propriedades desse parágrafo. Vemos que para alterá-lo utilizamos o método set() de Element, que recebe dois parâmetros. O primeiro é o que queremos alterar e o segundo é o novo conteúdo.
meuParagrafo.set("html", "Coloco outro texto no parágrafo");
A execução da linha anterior forçará a que o conteúdo do parágrafo seja "Coloco outro texto no parágrafo".
Agora vejamos uma segunda função que também faz uso de getElement() para selecionar outro elemento.
function selecionarPrimeiraLista(){
minhaLista = $(document.body).getElement("ul");
minhaLista.set ("style", "font-size: 150%; color: red");
}
Com este novo exemplo estamos selecionando o primeiro elemento UL que há no BODY do documento HTML. Isto nos selecionará a primeira lista UL que tiver no corpo da página. Logo, com a seguinte linha mudamos esse elemento UL para atribuir novos estilos CSS. O método set() da classe Element, como podemos comprovar e tal como havíamos visto em distintos exemplos deste manual de criarweb.com, é muito polivalente, permitindo alterar qualquer estilo ou atributo de uma etiqueta HTML.
Para finalizar este exercício podemos
ver o exemplo em funcionamento em uma página à parte.
