Una de las grandes ventajas de cualquier framework de javascript es poder acceder con gran facilidad al DOM. Con esto quiero decir, poder recorrer y acceder a cualquier contenido de un documento html / xhtml.

En esta primera parte, quiero poner algunos ejemplos sencillo de como se usa y un explicacion de los mismo:

this.link = new Element('a',{
 'href': 'http://siciliangirl.blogspot.com',
 'title': 'Un blog sobre web 2.0, xhtml, css, javascript',
 'html': 'siciliangirl blog'
});
this.link = new Element('img',{
 'src': 'http://siciliangirl.blogspot.com/images/mi_image.jpg',
 'alt': 'titulo de mi imagen'
})

Con new Element podemos crear un elemento o tag html, como el link expuesto en el ejemplo. Incluso podríamos añadir a que clase pertenece o si tiene una id única, o bien, añadirle estilos propios, etc.
Ocurriría lo mismo si queremos crear un nuevo div:

this.link = new Element('div', {
 'id': 'id_unica',
 'class': 'mi_clase'
})

Aunque hay muchas propiedades dentro de un elemento hay que seguir el estándar marcado por W3C consortium y por nuesto doctype, es decir, a un elemento div no le pondremos la propiedad src que es propia de algunos elementos como img.
Para añadir más dinamismo, imaginemos que queremos hacer un listado dinámico (tag select), se podría hacer de la siguiente manera:

this.ids = new Element('div',{ 'class': 'selection' });
this.selects = new Element('select');
for(var i=0; i<options.tipo.length; i++){
 this.tipo = new Element('option', { 'name': i, 'text':options.tipo[i] });
 this.tipo.injectInside(this.selects);
}
this.selects.injectInside(this.ids);
this.ids.injectInside(select);

Aquí en este ejemplo hay más conceptos, vamos por partes:

• options.tipo: options es un objeto que contiene un array llamado tipo y que recorremos con un bucle
• injectInside: es un método que tiene Elements y sirve para indicar que incrustemos el elemento creado dentro de otro elemento al final de su contenido.
• 1. Creamos un elemento div con las clase 'selecction'
• 2. Creamos un elemento select
• 3. Recorremos con un bluce un array y dentro creamos por cada contenido dentro del array un elemento del tipo option
• 4. Incrustamos los nuevos elementos del tipo option dentro del elemento del tipo select
• 5. Fuera del bucle incrustamos el elemento sel tipo select dentro del elemento div previamente creado

En próximos artículos iré ampliando como crear elementos con mootools, entre ellos explicaré los métodos de Element.