comparte el articulo 

Uso de extensiones del objeto Element con MooTools: Core

Actualizado el 07/11/2013 < > 0 Comentarios

Resumen: Explicamos a detalle la primera de las cuatro grandes divisiones con las que cuenta el objeto Element.

El objeto Element recibe mucha atención dentro del framework MooTools. La mayoría de las funciones en el objeto Element son muy evidentes, y básicamente se explican por sí mismo. Por ejemplo, Element.getTag hace lo que por lógica debiera hacer, sin truco y sin algún tipo de resultado inesperado.

Como dicho objeto recibe tanta atención, tiene su propia sección en el código y está dividido en cuatro grandes archivos, utilizados para definir su core, sus eventos, los estilos que utiliza y las dimensiones.

Constructor del objeto Element

El contructor se encarga de crear un objeto de tipo Element, al igual que document.createElement en JavaScript nativo, pero con la diferencia que al utilizar este constructor también se le añaden las extensiones de MooTools al elemento.

var img = new Element("img");

La sentencia “new Element” también te permite añadir cualquier propiedad que desees al momento de crear el elemento:

new Element('a', {
	styles: {
		'display': 'block',
		'border': '1px solid green'
	},
	events: {
		click: function(){
			//operación por hacer al dar clic
		},
		mousedown: function(){
			//operación por hacer al presionar el botón izquierdo del ratón
		}
	},
	/* Es necesario que la propiedad class se encuentre entre comillas, para evitar problemas con IE */
	'class': 'miClase',
	href: 'http://www.lawebera.es'
});

Para poder utilizar el índice “styles” se hará uso de la función “setStyles”, la cual se encargará de establecer una propiedad CSS al elemento. Por su parte el índice “events” puede ser utilizado mediante “addEvents”, y sirve para tener un control de los eventos que se realizan sobre el elemento que se maneja. El resto de los índices son utilizados como propiedades con el prefijo set.

Debes tener en cuenta, que no todos los índices de propiedad se tienen que escribir con comillas, pero la propiedad “class” tiene que tenerlas ya que es una palabra reservada en IE.

Es necesario recalcar que esta sentencia no inserta el elemento en el DOM, para ello es necesario utilizar Element.adopt, .inject, .wraps, etc.

new Element('img', {src: 'http//...'}).inject($(miElemento));

Función $()

La función $ tiene 2 objetivos, el primero es lograr obtener un elemento basándose en su ID, y el otro es la aplicación de todos los métodos de elementos a ese elemento. Esta función puede tener 2 tipos de parámetros, una cadena que representa el id de un elemento en el DOM o una referencia de elemento.

//cadena que representa el id de un elemento:
var elemento1 = $('obterElementoPorId');
 
//una referencia de elemento:
var elemento2 = $(elemento1.childNodes[0]);

Ahora ambos elementos, elemento1 y elemento2, tendrán las extensiones que mootools aplica a los elementos. En los navegadores modernos, las extensiones de elementos se aplican automáticamente a todos los elementos en el DOM, pero en navegadores obsoletos, como Internet Explorer, es necesario ejecutar la función $ para tener aplicadas las extensiones.

Función $$()

La función $$ (double dollar) tiene un importante papel importante en MooTools, se encarga de transformar un conjunto de elementos en una instancia de la clase Elements.

$$ puede tomar diferentes tipos de argumentos, ya sea referencias a elementos, arreglos con identificadores de elementos, colecciones de elementos html nativos (como document.getElementByTagName o element.childNodes). Incluso si se ha incluido la extensión Selectors.js, $$ también puede identificar elementos mediante un selector CSS.

//Obtener todos los elementos de tipo pre y p en la página
$$('pre', 'p');
 
//Obtener todos los elementos pres dentro del elemento con id "miElemento"
var miElemento = $('miElemento');
$$(miElemento.getElementsByTagName('pre'));
 
//Aqui pasamos una serie de colecciones, arreglos e instancias de elementos
var misElementos = $$(miElemento.childNodes, miElemento, ['idOtroElemento']);

La colección devuelta estará compuesta primero por todos los elementos que coinciden con el primer argumento, después todos los elementos que coinciden con el segundo, y así sucesivamente.

Clase Elements

La clase Elements es en realidad sólo un arreglo de elementos, el cual se ha ampliado para que pueda efectuar cualquiera de las extensiones que se pueden ejecutar sobre un elemento. Por ejemplo:

/* Aplica el color rojo a todos los párrafos de una página */
$$('p').setStyle('color','red');
/* Regresa el color negro después de un tiempo */
(function(){$$('p').setStyle('color','#000')}).delay(1000);

Esta clase se puede extender como la clase Element y cada objeto Elements obtendrá las propiedades.

Al ejecutar un método sobre un conjunto de elementos, éste va a iterar a través de todos y ejecutará esa misma funcionalidad en cada uno de ellos. Esto está bien siempre y cuando se necesite ejecutar un solo método, pero si necesitamos ejecutar más de uno, debemos recorrer todos los elementos para aplicar cada método necesario. Además de esto, debemos aclarar que las múltiples llamadas a métodos en un objeto de elementos, hace que se recorran todos los elementos cada vez que se ejecuta una función, haciendo que el proceso se vuelva muy lento.

Element.set

Con el método abreviado Element.set, puedes establecer eventos, estilos y propiedades. Cuenta con la misma sintaxis que el segundo argumento al llamar a new Element, y con él básicamente puedes alterar cualquier propiedad nativa que esté disponible, como por ejemplo src, href o value.

$(elemento).set({events: ..., styles: ..., etc.});
//Que es lo mismo que esto:
$(elemento).setStyles({...}).addEvents({...}).etc.

Element.get

Lo contrario a Element.set es Element.get, esta método se utiliza para recuperar las propiedades de un elemento.

//Para obtener el source de un elemento hacemos lo siguiente:
$(elemento).get('src');

Debes tener en cuenta que Element.get(‘value’) devolverá el valor de un elemento, pero solamente será eso, no devuelve el valor de la opción seleccionada, ya que value no es una propiedad de una lista de selección.

Publicado el 06/11/2013, última actualización 07/11/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras