AplicacionesWeb

Original de jourmoly.com.ar

Cuarta y ultima parte de esta serie de artículos sobre el manejo de DOM con la ayuda de Mootools. Mostraré brevemente todos aquellos métodos que quedaros pendientes, son muy sencillos, pero a la vez, algunos de ellos son por demás útiles.

getPrevious

Dado un elemento, getPrevious devuelve el elemento inmediatamente anterior.

var miElemento = $('elemento2').getPrevious();  

//miElemento es ahora una referencia al div con id="elemento1"

getNext

Como getPrevious, pero devuelve el elemento siguiente.

var miElemento = $('elemento2').getNext();  

//miElemento es ahora una referencia al div con id="elemento3"

getFirst

Dado un elemento, getFirst devuelve el primero de los elementos que están en su interior.

var miElemento = $('contenedor').getFirst();  

//miElemento es ahora una referencia al div con id="elemento1"

getLast

Dado un elemento, getLast devuelve el último de los elementos que están en su interior.

var miElemento = $('contenedor').getLast();  

//miElemento es ahora una referencia al div con id="elemento2"

getParent

Dado un elemento, getParent devuelve su elemento padre.

var miElemento = $('elemento1').getParent();  

//miElemento es ahora una referencia al div con id="contenedor"

getChildren

Dado un elemento, getChildren devuelve sus elementos hijos (no los “nietos” ni otros anidados).

var miElemento = $('contenedor').getChildren();  

//miElemento es ahora un arreglo de dos posiciones con las referencias a los elementos
//id="elemento1" y id="elemento2"

hasChild(otroElemento)

Dado un elemento, hasChild devuelve true si dicho elemento es padre del elemento pasado por parámetro, de lo contrario, devuelve false.

var esHijo = $('contenedor').hasChild($('elemento1'));
//true  

var esHijo = $('contenedor').hasChild($('elemento3'));
//true

getProperty(propiedad)

Devuelve la propiedad especificada de un elemento.

var clase = $('elemento').getProperty('class');
//miClase

removeProperty(propiedad)

Borra la propiedad especificada de un elemento.

$('elemento').removeProperty('class');

getProperties(propiedad, otraPropiedad, masPropiedades)

Devuelve todas las propiedades especificadas de un elemento.

var propiedades = $('elemento').getProperties('id', 'class');  

alert(propiedades.id);
//elemento  

alert(propiedades.class);
//miClase

setProperties(objeto)

Cambia las propiedades especificadas por medio de un objeto de tipo llave => valor.

$('elemento').setProperties(
{
	'class': 'otraClase',
	'id': 'otroId'
});

setHTML(html)

Permite cambiar el HTML de un elemento.

$('elemento').setHTML('Bold');

setText(texto)

Permite cambiar el texto de un elemento.

$('elemento').setText('Este es mi texto');

Este es mi texto

getText()

Devuelve el texto de un elemento.

Este es mi texto

var texto = $('elemento').getText();
//Este es mi texto

getTag()

Devuelve el nombre del tag de nuestro elemento en minúsculas.

var tag = $('elemento').getTag();
//div

empty()

Borra todo el contenido de un elemento.

$('contenedor').empty();

Y esto es todo. Lo que sigue es profundizar un poco sobre los selectores, pero supongo que eso será luego de que salga la versión 1.2 de Mootools.

Articulos relacionados:

• Clases y objetos con Mootools
• Mootools y el DOM, tercera parte
• Mootools y el DOM, segunda parte
• Mootools y el DOM
• Sigma Grid, datagrid editable hecho con Ajax