comparte el articulo 

Manipulación de elementos del DOM con MooTools

Actualizado el 14/06/2012 < > 0 Comentarios

Resumen: En este artículo explicamos las distintas maneras que existen para seleccionar elementos del DOM de nuestra página, y utilizarlos para realizar operaciones con MooTools.

Una de las grandes ventajas de utilizar frameworks de JavaScript en nuestros proyectos, es que podemos seleccionar y manipular, de manera muy sencilla, los elementos que conforman nuestras páginas web. Este es un factor tan relevante, que incluso hay quienes centran su atención únicamente en él, y por ello se deciden a utilizar un framework en vez de realizar los proyectos con JavaScript puro.

Esto nos hace percatarnos de la relevancia que recibe este factor, y es que es algo que esta en uso en la mayoría de las operaciones que realizamos con frameworks, por lo que es muy importante llevar a cabo esta selección de manera correcta. Ya que tenemos los conocimientos básicos de MooTools, es tiempo de pasar a estudiar las distintas formas de seleccionar elementos del DOM y manipularlos para realizar operaciones con ellos.

Selección de elementos del DOM

La manera más común de seleccionar un elemento, es utilizando el signo de moneda ($) aunado a una cadena que nos ayude a indicar el “id” de un elemento; mientras que para lograr la selección de una serie de elementos utilizamos dos signos de moneda ($$) y algún selector que englobe todos los elementos que deseamos.

var elemento = $('idElemento'); // con esto seleccionamos 1 elemento
var variosElementos = $$('a.claseElemento'); // con esto seleccionamos varios elementos

Una vez que tenemos “capturado” el elemento, podemos llevar a cabo otras actividades para localizar elementos que se encuentren en el mismo DOM. Por ejemplo si quisiéramos encontrar la primera lista que se encuentre dentro del elemento que seleccionamos, podemos utilizar una sentencia como esta:

$('idElemento').getElement('ul'); // nos regresa el primer elemento "ul" dentro del elemento con id "idElemento"

Así como esta operación, podemos realizar otras para obtener más elementos, aquí tenemos algunos ejemplos:

var elemento = $('idElemento');
elemento.getParent(); // obtener el padre
elemento.getPrevious(); // obtener el elemento anterior
elemento.getNext(); // obtener el siguiente elemento hermano
elemento.getAllNext(); // obtener todos los elementos hermanos que le sigan
elemento.getChildren(); // obtener todos sus hijos

He incluso se puede optar por usar concatenación de funciones, de esa manera podemos especificar mejor la ruta para conseguir el elemento.

$('idElemento').getParent().getNext(); // con esto obtenemos el siguiente elemento hermano del padre del elemento cuyo id es "idElemento"

Y si queremos ser más exactos, podemos pasar un selector CSS dentro de cada una de estas funciones, esto para especificar el elemento que deseas obtener.

$('idElemento').getChildren('input[name=textoLaWebera]'); // esto nos regresa los hijos del elemento "idElemento" que sean del tipo input y que tengan "textoLaWebera" como valor del atributo name

Como se puede apreciar dentro del selector utilice un operador “=” para indicar que el valor del atributo tenía que ser igual al indicado, si queremos variar esto podemos utilizar algún otro operador de la lista permitida:

  • = : igual a
  • *= : contiene
  • ^= : empieza con
  • $= : termina con
  • != : no es igual a
  • ~= : se encuentra en una lista separada por espacios
  • |= : se encuentra en una lista separada por guiones

Por su parte el selector con doble signo de moneda, será utilizado cuando queramos seleccionar una serie de elementos sin depender de otro. Por ejemplo si quisiéramos seleccionar todos los elementos pertenecientes a una lista, basta con escribir este código:

var elementosLista = $$("li");

Si queremos ser más específicos, podemos ampliar la especificidad del selector, supongamos que queremos solo los elementos de una lista que tengan cierta clase:

var elementosLista = $$("li.ciertaClase");

Manipulación de elemento

Una vez que tenemos seleccionados los elementos, podemos realizar las operaciones que deseemos con ellos, por ejemplo si queremos cambiar el color de los elementos de una lista con MooTools, basta con realizar algo como esto:

$$('li').each(function(elemento, index){
  elemento.setStyle('color','steelblue');
});

Pero esto lo puede realizar CSS de manera más sencilla, así que justifiquemos el uso de MooTools y agreguemos unos cuantos efectos.

$$('li').each(function(elemento, index){
  elemento.setStyle('display','none').fade('hide').setStyle('color','steelblue').fade('in');
});

Mejorar el rendimiento

Para poder obtener un mejor rendimiento al utilizar la selección de elementos en nuestro código, es recomendable hacer uso de la concatenación de métodos y guardado en variables, de esa manera los elementos obtenidos quedan almacenados en cache y permite hacer un uso más rápido de ellos.

Por ejemplo, si tenemos un código como el siguiente:

$('elemento1').setStyle('color','steelblue');
$('elemento1').fade('hide');

$('elemento2').set('tween',{duration: 1000})
$('elemento2').fade('hide');
...
//en otra parte del código
$('elemento2').fade('in');

Es mejor representarlo de la siguiente manera:

$('elemento1').setStyle('color','steelblue').fade('hide');
var elem2 = $('elemento2').set('tween',{duration: 1000}).fade('hide');
...
//en otra parte del código
elem2.fade('in');

Publicado el 14/06/2012, última actualización 14/06/2012.

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