En el capítulo anterior del manual de Mootools vimos cómo podríamos seleccionar un elemento en concreto de la página. En este nuevo artículo de DesarrolloWeb.com veremos cómo seleccionar todos los elementos de una misma etiqueta, por ejemplo, todos los enlaces, todos los párrafos, etc. Para ello utilizaremos el método getElements() de la clase Element de Mootools.

Antes de continuar con este artículo conviene haber leído el texto anterior, en el que comentamos la función getElement() de Mootools, ya que getElements() funciona exactamente igual, con la única diferencia que devuelve todos los elementos de un tipo en un array y no únicamente uno.

$("elemento_de_la_pagina").getElements("p")

Una línea como la anterior seleccionaría todas las etiquetas de párrafo ("p") que hay dentro del elemento "elemento_de_la_pagina".

Veremos ahora unos ejemplos de uso de getElements() para terminar de entender su funcionamiento. Tendremos un código HTML para seleccionar elementos dentro de él, que será el mismo que en el artículo anterior de este manual.

Veamos este código:

function seleccionarLiEnDiv(){
   todosLiEnDiv = $("capadiv").getElements("li");
   todosLiEnDiv.each(alterarLi);
}

Esta función, en la primera línea, selecciona todos los elementos "li" (elementos de lista) que hay dentro de una capa llamada "capadiv". Esto nos devuelve un array donde en cada una de sus casillas tenemos una instancia de cada uno de los LI que hay dentro del elemento "capadiv".

Se entiende entonces que la variable todosLiEnDiv es un array de objetos de la clase Element, en este caso un array de elementos de lista.

Luego, en la siguiente línea, estamos utilizando un método propio de Mootools llamado each(). Nos viene bien explicar con detalle este método each, porque todavía no lo habíamos utilizado ni explicado anteriormente en desarrollo web .com. each() forma parte del core de Mootools y también de la clase Array. En este caso estamos invocando a each sobre un array. Lo que hace es ejecutar, para cada elemento del array, una función que se le pase por parámetro. Dicho de otra manera, para cada elemento del array todosLiEnDiv vamos a llamar a la función alterarLi, pasando como parámetro cada uno de los elementos del array.

La función que se invoca con each para cada elemento del array recibe como parámetro el valor del elemento actual. Así pues, podemos ver cómo sería esa función alterarLi.

function alterarLi(elemento){
   elemento.set("style", "margin: 15px; background-color: #999999");
}

Como vemos, recibe por parámetro el elemento actual y simplemente, se llama al ya conocido método set() para alterar ese elemento. Así pues, alterarLi recibirá cada uno de los elementos del array, esto es, cada uno de las etiquetas LI que teníamos en el array que nos devolvió getElements().

Ahora veamos otra función interesante para ilustrar el funcionamiento de getElements().

function seleccionarEnlaces(){
   todosEnlaces = $(document.body).getElements("a");
   todosEnlaces.each(function(elemento){
      elemento.appendText(" Click aquí!");
   });
}

Aquí se puede ver un uso similar de getElements(), con el que vamos a seleccionar en un array todos los enlaces (elementos de etiqueta "a") que hay en el cuerpo de la página. Con $(document.body) tenemos una referencia al cuerpo de la página o etiqueta BODY.

Siguiendo el ejemplo, tiene que quedar claro que en la variable todosEnlaces tenemos un array con todos los enlaces de la página. Ahora con todosEnlaces.each() hacemos llamadas a una función pasando cada uno de los elementos del array. En este caso, la propia función está expresada dentro del parámetro que recibe each. En esa función recibimos como parámetro cada uno de los elementos del array y dentro, simplemente, llamamos a otro método de la clase Element, appendText(), que sirve para añadir un texto al elemento.

El resultado de ejecutar esta función será la alteración de texto de todos los enlaces de la página, agregando al final la cadena " click aquí".

El ejemplo en funcionamiento se puede ver en una página aparte. (hemos combinado los ejemplos de este artículo y el anterior, para tener en un sólo código los usos de las funciones getElement() y getElements())