JOURMOLY

Una de las clases mas importantes que tiene Mootools es la clase Element, la cual nos brinda métodos para manipular el DOM de nuestras páginas de manera muy sencilla.

Creando un Elemento

var miElemento = new Element(tipoElemento, {opciones});

Donde tipoElemento es el tipo de elemento que vamos a crear, por ejemplo ‘a’ (un enlace).

var miEnlace = new Element('a');

Las opciones pueden ser propiedades, eventos y estilos tal como lo detallo a continuación.

Propiedades
Las propiedades tales como id, class, href se agregan como propiedades de un objeto, así:

var miEnlace = new Element('a',
{
      'class': 'mi-clase',
      'id': 'mi-id',
      'href': 'http://sitio.com'
});

Estilos
Los estilos se agregan de manera muy similar a las propiedades, pero en una llave styles.

var miEnlace = new Element('a',
{
      'href': 'http://sitio.com',
      'styles':
      {
            'border': '1px solid #ff0000',
            'padding': '5px',
      }
});

Eventos
Podemos agregar varios eventos de la misma manera que agregamos estilos, pero esta vez en la llave events.

var miEnlace = new Element('a',
{
      'href': 'http://sitio.com',
      'styles':
      {
            'border': '1px solid #ff0000',
            'padding': '5px',
      },
      'events':
      {
            'mouseenter': function()
            {
                  alert('mouseEnter');
            },
            'mouseleave': function()
            {
                  alert('mouseLeave');
            }
      }
});

En todos los ejemplos los elementos son creados, pero para que puedan ser visualizados deben ser insertados en algún sitio. Mas adelante explicaré como, pero básicamente se trata de usar injectBefore, injectAfter, injectInside, injectTop y/o adopt.

Utilizar elementos existentes

Con los ejemplos anteriores vimos como crear nuevos elementos, pero si lo que deseamos es utilizar elementos que ya existen en nuestra pagina podemos hacer uso de las funciones $ y $$ para buscar y utilizar los elementos que necesitamos.

$( id )
Utilizamos $ cuando buscamos un solo elemento por su id. Retorna el elemento o false en caso de no encontrarlo.

<a href="#" id="uno">Mi Enlace</a>

var miEnlace = $('uno');

$$( selector [, otro selector, y mas selectores] )
Cuando buscamos varios elementos debemos utilizar $$ quien nos devuelve un arreglo con los elementos que especificamos.

//Seleccionamos todos los enlaces de nuestra página
var misEnlaces = $$('a');
 
misEnlaces.each(function(elemento)
{
       miEnlace = elemento
});

Puedes indicar varios tipos de elementos como en el siguiente ejemplo:

//Seleccionamos todos los enlaces y h1.
var misElementos = $$('a', 'h1');

También puedes indicar un arreglo con ids de elementos:

//Seleccionamos todos los enlaces y los elementos con id uno, dos y tres.
var misElementos = $$('a', ['uno', 'dos', 'tres']);

Si incluiste el paquete Element.Selectors.js también puedes usar selectores CSS.

//Seleccionamos todos los enlaces con class enlace
var misEnlaces = $$('a.enlace');

//Seleccionamos todos los enlaces que están dentro de elemento.
var misEnlaces = $$('#elemento a');

//Seleccionamos todos los enlaces, h1 y elementos con class texto.
var misElementos = $$('a', 'h1', '.texto');

Por el momento ya vimos como crear nuevos elementos y seleccionar los existentes. Próximamente explicaré algunos de los métodos para manipular elementos, insertarlos, copiarlos, borrarlos, agregarles propiedades, eventos, clases, estilos, etc

Popularity: 4% [?]

Otros artículos

• Mootools y el DOM
• Empaquetar archivos y carpetas
• Fx.Slide, un ejemplo más
• URL amigables genéricas
• attachSound y LoadMovie