Element en Mootools. Método $()

  • Por
El módulo Element de Mootools es uno de los más importantes, que nos permite acceder a cualquier elemento de la página y alterar sus propiedades. Empezamos conociendo el método de Window $().
Mootools tiene un módulo llamado Element, que debemos conocer y dominar para poder trabajar con el framework y tener a mano cualquiera de los componentes de la página. En nuestro Manual de Mootools hemos visto una serie de artículos para aprender a manejar otros módulos de los que componen el framework. Sin embargo, hasta que no aprendamos a manejar un poco el objeto Element, no podremos empezar a hacer y entender ejemplos más complejos. Así que, aunque nos hayamos saltado algunos temas de la documentación de Mootools, vamos a empezar a explicar Element. Ya volveremos atrás más adelante para incluir explicaciones de otras partes de Mootools.

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.
Nota: Para lo que a nosotros respecta, debemos saber que con $() obtenemos una referencia al objeto Element asociado a un elemento de la página. No hay más!. Pero bueno, como está en la documentación de Mootools, hemos querido también mencionar que en el caso del navegador Internet Explorer, de manera transparente para nosotros, se aplican todos los métodos de Element a ese objeto al invocar a $(), porque hasta entonces no estarían disponibles. Otros navegadores como Firefox, Opera o Safari tienen disponibles desde el principio cualquiera de los métodos de Element (siempre que hayamos incluido el framework Mootools y el módulo Element) en cualquiera de los componentes de la página.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir