Tutorial de Mootools: seleccionar objetos

4Sebastian Barria • 7th Mar 2010 • Javascript, Mootools, Tutoriales

Este es uno de varios minitutoriales donde explicaré lo escencial de Mootools.

Está enfocado a ir aprendiendo funcionalidades específicas, que nos permitan comenzar a aprovechar esta excelente librería desde el primer momento.

En este caso, hablare acerca de como seleccionar objetos según su ID, o clase, para poder aplicar acciones específicas sobre ellos.

Porsupuesto, que lo primero que deberían hacer es bajar la librería Mootools; crear una página para trabajar con ella y llamar al archivo dentro de la etiqueta HEAD para que esté disponible para usarse. Una vez hecho esto, veamos de que nos ofrece Mootools.

Seleccionar un objeto específico

Uno de los primeros beneficios que encontré al utilizar Mootools, es la facilidad y simpleza que ofrece para seleccionar objetos de una página.

Generalmente, para poder seleccionar un objeto específico se debe definir su atributo ID, y luego utilizar la siguiente función para seleccionarlo:

var miObjeto = document.getElementById('ID_DEL_OBJETO');

Uno de los problemas de esto es que hay que preocuparse de escribir correctamente la línea, respetando las mayúsculas, lo cual aveces genera errores.

La alternativa Mootools es mucho más simple:

var miObjeto = $('ID_DEL_OBJETO');

De esta manera, en la variable miObjeto quedará almacenado el objeto que seleccionamos, igual como si lo hubiésemos escogido con la función document.getElementById().

Luego de seleccionar el objeto, podemos comprobar que fue seleccionado correctamente utilizando la función alert():

alert(miObjeto);

Si seleccionamos un DIV, por ejemplo, el alert mostrará lo siguiente:

[Object HTMLDivElement]

Esto nos indica que el elemento que seleccionamos es un DIV.

Una vez seleccionado, podemos realizar muchas de las tareas que haríamos generalmente:

miObjeto.innerHTML="Este es el nuevo contenido para este div"

miObjeto.style.display="none";

Seleccionar múltiples objetos

Mootools también ofrece una alternativa a la supuesta función document.getElementsByClassName(), que se utilizaría para seleccionar todos los objetos de la página que posean una clase específica.

El problema de esta función es que no existe de forma nativa en todos los navegadores. Existen algunas alternativas pero en la librería Mootools, esta función viene de forma nativa, por lo tanto, la podremos utilizar en cualquier momento.

Al utilizar javascript sin librerías, para escoger todos los links que estan en un DIV específico, es necesario la siguiente función:

var misObjetos = document.getElementById("ID_DEL_DIV").getElementsByTagName("A");

Con esta función, en la variable misObjetos, se almacenará un array con todos los links que existan dentro del DIV especificado.

La alternativa, utilizando Mootools, sería la siguiente:

var misObjetos = $$('#ID_DEL_DIV a');

Como verán, se utiliza $$ para seleccionar múltiples objetos, y dentro del paréntesis se definen los objetos a seleccionar, igual como se haría en CSS. Esto es mucho más flexible, pues si quiero seleccionar solamente los links que tengan la clase “especial“, por ejemplo, debería hacerlo de la siguiente manera:

var misObjetos = $$('#ID_DEL_DIV a.especial');

Incluso permite escoger todos los objetos de una página que tengan una clase específica, independiente del tipo de objeto que sea, y que no se encuentren necesariamente en un DIV definido:

var misObjetos = $$('.especial');

Con la línea anterior, estaríamos guardando en la variable misObjetos, todos los objetos de la página que tengan aplicada la clase “especial“.

Con estos objetos seleccionados, es posible hacer cualquier cosa con ellos, utilizando un FOR. En el siguiente ejemplo, cambiaremos la clase de todos estos objetos a “nueva_clase“:

for(i=0;i<misObjetos.length;i++){
    misObjetos[i].className="nueva_clase";
}

Una vez ejecutado el FOR anterior, todos los objetos de la página que tenían aplicada la clase “especial“, ahora tendrán solamente la clase “nueva_clase“.

Incluso, es posible definir acciones a cada uno de estos objetos, que ocurran en eventos especiales, como “onmouseover” y “onmouseout“:

for(i=0;i<misObjetos.length;i++){
    misObjetos[i].onmouseover=function(){
        this.className="especial over";
    }
    misObjetos[i].onmouseover=function(){
        this.className="especial";
    }
}

Con el FOR anterior, definimos que, para cada objeto, al pasar el mouse sobre él, su atributo class cambie a “especial hover” (es decir, que tendrá aplicadas ambas clases). Al sacar el mouse de él, su clase volverá a ser “especial” solamente. La idea es definir por CSS que los elementos con la clase “hover” tengan algún atributo específico (negrita, cambio de color, etc).

El ejemplo anterior sería una manera práctica para hacer un menú con rollovers. Sin embargo esto es un poco absurdo en este ejemplo, pues todos los elementos son links, y los links por defecto tienen la subclase “a:hover“, que se puede definir por CSS. Sin embargo, esto se puede aplicar a todos los elementos de la página, como por ejemplo, a los DIVS, para hacer que cambien de color al pasar el mouse sobre ellos, pues los objetos que no son links, no poseen la subclase “:hover” por defecto en todos los navegadores (como siempre, léase Internet Explorer).

Cambiar las clases

Como vimos anteriormente, para cambiar la clase de un objeto, utilizamos la propiedad javascript obj.className=”xxxxx”. Si se fijan, en ese caso estamos reemplazando toda la información de clases que tenga el objeto y lo estamos reemplazando por una nueva. Por lo tanto, si un objeto requiere de dos clases para funcionar (por ejemplo, claseA y claseB), y nosotros necesitamos agregar la clase “over”, tendríamos que definir su propiedad className como “claseA claseB over”. Y luego, si queremos eliminar la clase over, tendríamos que volver a definir la propiedad className como “claseA claseB”.

Bueno, Mootools nos ofrece algo mucho más simple. Las funciones addClass() y removeClass(). Si un objeto ya tiene aplicada la clase claseA y claseB, y le decimos obj.addClass(“over”), automáticamente se va a añadir la clase a la lista. El objeto puede tener 20 clases aplicadas, y nosotros solo tenemos que decir que agregue o quite una clase específica. No será necesario escribir la lista completa de clases. Veámoslo con un ejemplo:

for(i=0;i<misObjetos.length;i++){
    misObjetos[i].onmouseover=function(){
    this.addClass(“over");
    }
    misObjetos[i].onmouseover=function(){
        this.removeClass("over");
    }
}

Lo bueno de esto, es que podemos seleccionar una lista de objetos que tengan aplicada una clase específica y podemos agregarle la clase que deseemos a cualquiera de ellos (“over “ en el caso de este ejemplo), sin tener que preocuparnos de que otras clases posee, o de que tipo de objeto. Para eso, bastaría solo con definir antes del for lo siguiente:

var misObjetos=$$(‘.destacable’);

Acabamos de decir que la variable misObjetos (que sería la que contiene la lista de objetos que queremos modificar dentro del FOR) esté compuesta por todos aquellos objetos que posean la clase “destacable”. En este caso, esta clase no necesariamente va a definir algún estilo de CSS para el objeto. Solamente la estamos utilizando para “marcar” todos aquellos objetos que serán modificados por el FOR. Independiente de las clases que tenga cada uno o el tipo de objetos que sea, se le aplicará la clase “over”, y con esto, podremos definir por CSS que cualquier objeto que tenga la clase “over” aplicada, posea alguna característica específica.