Element é o módulo de Mootools que contém a maioria de funções para alterar coisas da página. A maioria dos métodos de Element serve para alterar propriedades dos elementos que visualizamos em nosso navegador, como podem ser atributos CSS, código HTML, inserir código, obter propriedades, construí-los ou destruí-los, etc.
A maioria dos métodos da classe Element são simples de entender, porém devemos começar por um par de métodos que podem requerer algumas explicações adicionais, que servem para selecionar elementos da página.
Função dólar $()
Esta função se incluiu dentro dos métodos do objeto Window. Por isso, poderemos acessá-la diretamente através de qualquer parte do código Javascript da página.
Com $() se efetuam duas operações:
Vejamos um exemplo de uso do método $()
Primeiro, vejamos um elemento qualquer de uma página web:
<div id="meubloco">
Estou provando Element de Mootools!
</div>
Isto é um bloco DIV, ao qual colocamos um identificador id="meubloco". Agora vejamos como podemos recuperá-lo com Mootools como um objeto da classe Element.
elemento_meubloco = $("meubloco");
Agora na variável elemento_meubloco temos uma referência a esse bloco DIV. Como elemento_meubloco é um objeto da classe Element, podemos invocar métodos de Element. Ainda não vimos explicações sobre os diferentes métodos, porém podemos mostrar um código para alterar as propriedades CSS de tal bloco.
elemento_meubloco.setStyle("border", "1px solid #ff8800");
elemento_meubloco.setStyle("padding", "20px");
Não é nada complicado, simplesmente devemos saber que, com o método setStyle() da classe Element, podemos mudar as propriedades CSS do elemento.
Podemos ver o exemplo em funcionamento em uma página à parte.
O método dólar também aceita uma referência a um elemento, ou seja, ao invés de um string com o identificador do elemento, podemos passar uma referência DOM do elemento desejado. Para esclarecer este ponto, vejamos um código que parece um pouco redundante, mas que tem uma razão de ser que explicarei logo:
meuelemento = document.getElementById("meubloco");
meuelemento = $(meuelemento);
meuelemento.setStyle("font-size", "150%");
Com meuelemento = document.getElementById("meubloque") obtemos uma referência ao bloco DIV de antes, porém através do método getElementById() do objeto document. Este método faz parte de Javascript e qualquer navegador moderno o possui.
Logo, com meuelemento = $(meuelemento), o que fazemos é obter um objeto Element a partir da referência conseguida na linha de código anterior. Isto é necessário fazê-lo, porque até que não façamos a invocação ao método $(), a referência do elemento não é um objeto Element de Mootools em Internet Explorer, ou melhor dito, não tem aplicadas todas as funcionalidades de Element em IExplorer.
O código anterior pode ser visto neste link.
Como podemos ver, $(), pode ser útil quando não sabemos se em uma variável temos um identificador ou uma referência a um elemento do DOM. Ademais, é uma maneira mais rápida de fazer o document.getElementById(), que podemos conhecer anteriormente de Javascript.
