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.

Unique visitors to post: 57