lunes, 22 de agosto de 2011

FUNCIÓN $$

A diferencia de la función $ que sirve para identificar un elemento del DOM ya sea a través de su id o clase css, la función $$ se utiliza para recorrer todo el documento en busca de elementos del DOM que correspondan a una clase css, una etiqueta HTML etc., devolviendo un arreglo con todos los elementos encontrados, esta función viene a reemplazar a la función getElementsByTagName de javascript. 

Por ejemplo, desde javascript es posible acceder a todos los div de un documento con la siguiente función:

nodes = document.getElementsByTagName('div');

Usando prototype sería:

nodes = $$('div');

Dado que la función $$ devuelve un array necesitamos de una herramienta que nos permita recorrer ese array, y así poder trabajar con cada elemento del array. Por ello la función $$ se utiliza frecuentemente junto al método each de la siguiente manera:

$$('div').each(function(elem){alert(elem.id)}); 

Aquí con la sentencia $$ recorremos todo el documento buscando las etiquetas div, a continuación each recorre el array devuelto por $$ y por cada elemento encontrado muestra su id.

Veamos algunos ejemplos más de como utilizar la función $$ de Prototype.

//Darle color de fondo verde a todos los div del documento html
$$("div").each(function(elem){elem.style.backgroundColor="green";})

//Darle color de fondo rojo a todos los div del documento html que cuya clase css sea mi_clase
$$("div.mi_clase").each(function(elem){elem.style.backgroundColor="red";})

//Mostrar el valor de todos los objetos input cuyo contenedor (div)  tiene clase mis_ botones
$$(".mis_botones input").each(function(elem){alert (elem.value);})

//Mostrar el valor de todos los input con clase mis_botones
$$("input.mis_botones").each(function(elem){alert (elem.value);})

//Mostrar todas las etiquetas "a" cuyo contenedor tenga id=cajita1
$$("#cajita1 a").each(function(elem){alert (elem);})

//Idem anterior pero que la etiqueta "a" tenga el atributo TITLE "ni idea"
$$("#cajita1 a[title='ni idea']").each(function(elem){alert (elem);})

//Idem anterior pero que la etiqueta "a" tenga el atributo TITLE distinto a "ni idea"
$$("#cajita1 a[title!='ni idea']").each(function(elem){alert (elem);})

//Selecciona todos los elementos que esten con el atributo disabled
$$(":disabled").each(function(elem){alert (elem);})

//Selecciona todos los elementos input que esten con el atributo disabled
$$("input:disabled").each(function(elem){alert (elem);})

//Selecciona todos los elementos input que sean boton que esten con el atributo disabled
$$("input[type='button']:disabled").each(function(elem){alert (elem);})

//Dentro de una misma funcion $$ puedo seleccionar más de un elemento
$$("input[type='button']","a","select").each(function(elem){alert (elem);})

No hay comentarios:

Publicar un comentario