Webizzima - Le ofrecemos al mundo contenido profesional y de avanzada visión para usuarios que buscan grandes horizontes. Todo a la distancia de un clic y en español.

Manipulando elementos DOM HTML con Mootools 1.2

---

Si no te sientes listo, asegúrate de chequear el resto de los post previos en nuestra humilde serie de 30 días.

Ya hemos observado cómo seleccionar elementos dentro del DOM, cómo crear arrays, como crear funciones, cómo adjuntar eventos a elementos, etc. Hoy vamos a tratar la manipulación de elementos HTML. Con Mootools 1.2 puedes adicionar nuevos elementos dentro de una página html, eliminar elementos y cambiar cualquier estilo o parámetros de elemento, todo en tiempo real.

Lo básico

---

.get();
Esto te permite adquirir propiedades de elementos. Las propiedades de elementos son las varias piezas que conforman un elemento html, así como src, value, name, etc. Usando .get(); es muy simple:

//esto retornará la etiqueta html (div, a, span...)
//del elemento con el ID "id_name"
$('id_name').get('tag');

    Element 

Puedes usar .get() para adquirir más que etiquetas html:

• id
• name
• value
• href
• src
• class (retornará todas las clases si el elemento es múltiple)
• text (el contenido de texto de un elemento)
• etc…

.set();
.set(); trabaja igual que .get();,excepto que en vez de tomar un valor, ejecuta un valor. Esto es útil cuando es combinado con eventos y te permite cambiar valores después que la página se ha cargado.

//esto activará el href de #id_name a "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');

    
    Motor de Búsqueda

.erase();

Con .erase(); tú puedes borrar el valor de las propiedades de los elementos. Trabaja igual que los dos previos. Selecciona tu elemento, entonces escoge cuál propiedad deseas eliminar.

//esto borrará el valor de href value de #id_name
$('id_name').erase('href');

    
    Motor de Búsquedach Engine

Moviendo elementos

---

.inject();
Para mover un elemento existente alrededor de la página puedes usar .inject();. Como las otras herramientas que miramos, es muy fácil de usar y además te brinda mucho control sobre la interface de usuario. Para usar .inject();, ajustemos primeramente unos cuantos elementos dentro de variables:

var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');

El código de arriba posiciona este html dentro de variables, haciéndolo muy fácil de manipular con Mootools.

A
B
C

Ahora, para cambiar el orden de los elementos, podemos usar .inject de 4 formas:

• bottom (por defecto)
• top
• before
• after

Bottom y top colocarán el elemento inyectado dentro de un elemento seleccionado. before y after por otra parte, inyectarán un elemento antes o después que otro, pero no dentro.

Así que cambiemos el orden a A-C-B. Ya que no necesitamos inyectar un elemento dentro de otro, podemos usar before o after.

//Se traduce en: inyectar el elemento C antes que el elemento B
elementC.inject(elementB, 'before'); 

//Se traduce en: inyectar el elemento B después que el elemento C
elementB.inject(elementC, 'after');

Creando un nuevo elemento

---

new Element
Puedes hacer uso del constructor “new Element” para crear un nuevo elemento html. Es muy parecido a escribir un elemento html regular, excepto que ajustaremos la sintaxis para hacerlo correr mejor con Mootools:

//Primero, nombras una variable y declaras "new Element"
//luego defines el tipo de elemento (div, a, span...)
var newElementVar = new Element('div', {
  //aquí pones todos los parámetros del elemento
    'id': 'id_name',
    'text': 'Soy un nuevo div',
    'styles': {
        //aquí pones todos los parámetros de estilo
        'width': '200px',
        'height': '200px',
        'background-color': '#eee',
        'float': 'left'
    }
});

Ahora que posees un elemento, puedes inyectarlo en cualquier lugar con el código que aprendimos antes. Comencemos con el siguiente código html:

Contenido div

Ahora, transformemos #content_id en una variable:

var bodyWrapVar = $('body_wrap');

Tal y como aprendimos antes, podemos inyectar el elemento que hemos creado dentro del html actual:

//Se traduce en: "inyectar newElementVar dentro de bodyWrapVar,
//en la posición top
newElementVar.inject(bodyWrapVar , 'top');

El HTML debe terminar viéndose así:

    
Soy un nuevo div
Contenido div

Ejemplo

---

Para este ejemplo, vamos a crear un formulario que te permita agregar un nuevo elemento a tu página html. Primero, vamos a configurar algunos inputs y un botón.

        ID:

        text:

        Crea un nuevo div

Ahora vamos a contruir el javascript Mootools que permitirá que este formulario html inyecte un nuevo elemento dentro de tu página. Primero vamos a agregar un botón con evento de clic y crearemos una función que contendrá nuestro código:

var newDiv = function() {
    //vamos a poner nuestro código "agregar nuevo elemento" aquí
};
window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

Lo siguiente que necesitamos figurarnos es con qué tipo de variables estaremos enfrentándonos. Para usar los datos en los formularios de entrada, necesitaremos .get();

var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');

Ahora las variables idValue y textValue, contienen el valor de sus respectivos formularios de entrada. Ya que queremos obtener el valor de los campos de entrada al mismo tiempo que el usuario haga clic en el botón “create a new div”, necesitamos pegar el código de arriba dentro de la función newDiv();. Si quisiéramos obtener get(); los valores fuera de la función, obtendríamos los valores en una carga, no al hacer clic.

var newDiv = function() {
    var idValue = $('id_input').get('value');
    var textValue = $('text_input').get('value');
};

window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

Ahora bien, necesitaremos agarrar el elemento al que queremos inyectar el nuevo div:

var newDiv = function() {
    var idValue = $('id_input').get('value');
    var textValue = $('text_input').get('value');
    var bodyWrapVar = $('newElementContainer');
};

window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

Ya que tenemos nuestros valores de entrada, ahora podemos crear el nuevo elemento:

var newDiv = function() {
    var idValue = $('id_input').get('value');
    var textValue = $('text_input').get('value');
    var bodyWrapVar = $('newElementContainer');

    var newElementVar = new Element('div', {
        //esto establece el ID al valor de la entrada pasando una variable
    	'id': idValue,
        //esto establece el texto al valor de la entrada pasando una variable
    	'html': textValue
    });
};

window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

Todo lo que nos queda es inyectar el nuevo elemento en nuestra página:

var newDiv = function() {
	var bodyWrapVar = $('newElementContainer');
	var idValue = $('id_input').get('value');

	var textValue = $('text_input').get('value');

	var newElementVar = new Element('div', {
    	        'id': idValue,
    	        'text': textValue
	});

        //Se traduce en: "inyectar newElementVar con la posición
        //inside-top de bodyWrapVar."
	newElementVar.inject(bodyWrapVar, 'top');
};

var removeDiv = function() {
        //esto borra el HTML interno, el cual
        //es todo lo que está dentro de las etiquetas div
	$('newElementContainer').erase('html');
}

window.addEvent('domready', function() {
   $('new_div').addEvent('click', newDiv);
   $('remove_div').addEvent('click', removeDiv);
});

Para aprender más…

---

Asegúrate de pasar algún tiempo en la sección Elements dentro de la documentación de Mootools:

• Element, contiene la mayoría de lo que hemos mencionado hoy aquí, y mucho más.
• Element.style, te brinda control sobre propiedades de estilo (esto es algo de lo que trataremos en otro tutorial)
• Element.dimensions, contiene herramientas para trabajar con posiciones, coordenadas y mucho más

Próximo tutorial

---

Día 7 – Configuración y obtención de Propiedades de Estilo

Vía | ConsiderOpen