En el capítulo anterior del Manual de Mootools vimos las primeras nociones sobre el módulo Element, que son muy interesantes para comenzar a tocar partes divertidas y útiles de Mootools. Ahora vamos a continuar con el método de Window $$(), que sirve para seleccionar un grupo de elementos de DOM y extender sus funcionalidades, para tratarlos como objetos de la clase Element de Mootools.

Función doble dólar $$()

Esta función forma parte del módulo Element, aunque se ha creado, igual que la función $() vista en el capítulo anterior, como un método de Window, por lo que se encuentra siempre disponible. Sirve para obtener referencias a un grupo variable de elementos de la página. Acepta una serie de posibles parámetros de entrada -que veremos luego- para especificar grupos de elementos y devuelve siempre un array con las referencias a los elementos, independientemente del número de elementos seleccionados.

El método $$ se puede utilizar de esta manera:

elementos_parrafo = $$("p");

Esto selecciona todas las etiquetas P de la página y devuelve un array con las referencias a todos estos párrafos. En el código anterior guardamos el Array de Elements devuelto una variable que hemos llamado elementos_parrafo.

Como decíamos, elementos_parrafo será un array de objetos Element, independientemente del número de párrafos que tuviese nuestra página.

Ejemplo completo de uso de $$()

Para entender esto, lo más fácil es ver un ejemplo de uso del método $$() para ver cómo funciona.

<p>
Esto es un párrafo
</p>
<p>
Esto es un segundo párrafo
</p>
<p>
Sigo con un tercer párrafo!
</p>

<script>
elementos_parrafo = $$("p");
//alert($type(elementos_parrafo)); Nos mostraría array en un alert
for (i=0; i<elementos_parrafo.length; i++){
   elementos_parrafo[i].setStyle("font-size", (100 + (i*50))+"%");
}
</script>

Primero hemos escrito un código HTML con tres párrafos.

A continuación tenemos un script en Javascript que hace uso de Mootools para recoger esos párrafos y tratarlos. En nuestro ejemplo hacemos uso del método $$(“p”) para obtener un array con los objetos Element correspondientes a todos los párrafos.

A continuación tenemos un bucle que recorre cada uno de los elementos del array y va cambiando el estilo de los mismos, en concreto el tamaño de la fuente. Entonces, para cada párrafo le coloca un tamaño de fuente mayor. Como se puede ver, con elementos_parrafo[i] estamos accediendo a cada una de las etiquetas HTML de párrafo.

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

Posibles parámetros de selección de elementos con $$()

Los posibles parámetros que acepta $$() son:

• Etiquetas HTML, una o varias.
• Arrays de elementos
• Variables con elementos
• Cadenas de caracteres con selectores de clases CSS, o identificadores

Ahora veamos otra serie de ejemplos de selección de elementos de la página:

elementos = $$("p","a");
Esto seleccionaría todos los párrafos de la página y en las posiciones sucesivas del array, todos los enlaces.

elementos=new Array(document.getElementById("p1"), document.getElementById("p3"));
elementos_parrafo = $$(elementos);
Con estas dos líneas seleccionaríamos los elementos con identificadores “p1” y “p3”. En la primera línea creamos el array con los elementos, extraídos con document.getElementById(), y en la segunda línea obtenemos un array con dichos elementos como objetos de la clase Element.

elementos=new Array($("p1"), $("a2"));
elementos = $$(elementos);
Este ejemplo es similar al anterior, con la diferencia que en este caso ya teníamos los elementos de la clase Element, seleccionados con $().

elemento0= $("p3");
elemento1 = $("a1");
elemento2 = $("a2");
elementos = $$(elemento0, elemento1, elemento2);
En este ejemplo tenemos tres variables con objetos de la clase Element y los seleccionamos con $$, especificándolos como tres parámetros consecutivos.

Ahora veamos un ejemplo con selectores. Tenemos este código HTML:

<div id="x">Este div es de identificador id=x</div>

Y luego este script:

<script>
elementos = $$("#x");
for (i=0; i<elementos.length; i++){
   elementos[i].setStyle("color", "blue");
}
</script>

Con $$("#x") obtenemos el elemento que tiene identificador id="x”. Será un único elemento. Luego con el bucle for recorremos el array para cambiar el color del texto de ese elemento a azul.

Un último ejemplo, en el que tenemos este código HTML:

<div class="titular">Esto es DIV de la clase titular</div>
<div>Este NO es de la clase titular</div>
<div class="titular">Esto es otro DIV que es titular</div>

Vemos tres bloques DIV. El primero y el tercero son de la clase “titular”. Entonces, veamos el siguiente código Javascript:

<script>
elementos_titular = $$(".titular");
//alert($type(elementos_parrafo)); Nos mostraría array en un alert
for (i=0; i<elementos_titular.length; i++){
   elementos_titular[i].setStyle("color", "red");
}
</script>

Con ello estamos seleccionando todos los elementos de la página que son de la clase titular, con el selector “.titular”. Con el bucle luego les estamos cambiando el color del texto a rojo a todos los elementos.

Podemos ver este último ejemplo en marcha aquí.

Por cierto, para que funcione la selección de elementos por selectores de clase CSS debemos tener el módulo Selectors cargado en Mootools.