Element es el módulo de Mootools que contiene la mayoría de funciones para alterar cosas de la página. La mayoría de los métodos de Element sirven para alterar propiedades de los elementos que visualizamos en nuestro navegador, como pueden ser atributos CSS, código HTML, inyectar código, obtener propiedades, construirlos o destruirlos, etc.

La mayoría de los métodos de la clase Element son sencillos de entender, pero debemos comenzar por un par de métodos que pueden requerir algunas explicaciones adicionales, que sirven para seleccionar elementos de la página.

Función dólar $()

Esta función se ha incluido dentro de los métodos del objeto Window. Por ello, podremos acceder a ella directamente desde cualquier parte del código Javascript de la página.

Con $() se efectúan un par de operaciones:

1. Obtener un objeto Element a partir de cualquier elemento de la página, pasando a $() el identificador del elemento que queramos recuperar.
2. En el caso que se esté viendo la página en Internet Explorer, $() realiza una segunda función, que consiste en aplicar al elemento seleccionado todos los métodos de la clase Element que aporta Mootools.

Veamos un ejemplo de uso del método $()

Primero veamos un elemento cualquiera de una página web:

<div id="mibloque">
Estoy probando Element de Mootools!
</div>

Esto es un bloque DIV, al que le hemos colocado un identificador id=”mibloque”. Ahora veamos cómo podemos recuperarlo con Mootools como un objeto de la clase Element.

elemento_mibloque = $("mibloque");

Ahora en la variable elemento_mibloque tenemos una referencia a ese bloque DIV. Como elemento_mibloque es un objeto de la clase Element, podemos invocar métodos de Element. Aun no hemos visto explicaciones sobre los distintos métodos, pero podemos mostrar un código para alterar las propiedades CSS de dicho bloque.

elemento_mibloque.setStyle("border", "1px solid #ff8800");
elemento_mibloque.setStyle("padding", "20px");

No es nada complicado, simplemente debemos saber que, con el método setStyle() de la clase Element, podemos cambiar las propiedades CSS del elemento.

Podemos ver el ejemplo en marcha en una página aparte.

El método dólar también acepta una referencia a un elemento, es decir, en vez de un string con el identificador del elemento, podemos pasarle una referencia DOM del elemento deseado. Para aclarar este punto, veamos un código que parece un poco redundante, pero que tiene una razón de ser que explicaré luego:

mielemento = document.getElementById("mibloque");
mielemento = $(mielemento);
mielemento.setStyle("font-size", "150%"); Con mielemento = document.getElementById("mibloque") obtenemos una referencia al bloque DIV de antes, pero a través del método getElementById() del objeto document. Este método forma parte de Javascript y lo tiene cualquier navegador moderno.

Luego, con mielemento = $(mielemento), lo que hacemos es obtener un objeto Element a partir de la referencia conseguida en la línea de código anterior. Esto es necesario hacerlo, porque hasta que no hagamos la invocación al método $(), la referencia del elemento no es un objeto Element de Mootools en Internet Explorer, o mejor dicho, no tiene aplicadas todas las funcionalidades de Element en IExplorer.

El código anterior se puede ver en este enlace.

Como podemos ver, $(), puede ser útil cuando no sabemos si en una variable tenemos un identificador o una referencia a un elemento del DOM. Además, es una manera más rápida de hacer el document.getElementById(), que podemos conocer anteriormente de Javascript.