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.
1
2
3
| <div id="elemento1">Elemento1</div>
<div id="elemento2">Elemento2</div>
<div id="elemento3">Elemento3</div> |
1
2
3
| var miElemento = $('elemento2').getPrevious();
//miElemento es ahora una referencia al div con id="elemento1" |
getNext
Como getPrevious, pero devuelve el elemento siguiente.
1
2
3
| <div id="elemento1">Elemento1</div>
<div id="elemento2">Elemento2</div>
<div id="elemento3">Elemento3</div> |
1
2
3
| 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.
1
2
3
4
| <div id="contenedor">
<div id="elemento1">Elemento1</div>
<div id="elemento2">Elemento2</div>
</div> |
1
2
3
| 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.
1
2
3
4
| <div id="contenedor">
<div id="elemento1">Elemento1</div>
<div id="elemento2">Elemento2</div>
</div> |
1
2
3
| var miElemento = $('contenedor').getLast();
//miElemento es ahora una referencia al div con id="elemento2" |
getParent
Dado un elemento, getParent devuelve su elemento padre.
1
2
3
4
| <div id="contenedor">
<div id="elemento1">Elemento1</div>
<div id="elemento2">Elemento2</div>
</div> |
1
2
3
| 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).
1
2
3
4
5
6
| <div id="contenedor">
<div id="elemento1">Elemento1</div>
<div id="elemento2">Elemento2
<div id="elemento3">Elemento3</div>
</div>
</div> |
1
2
3
4
| 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.
1
2
3
4
5
6
| <div id="contenedor">
<div id="elemento1">Elemento1</div>
<div id="elemento2">Elemento2
<div id="elemento3">Elemento3</div>
</div>
</div> |
1
2
3
4
5
| var esHijo = $('contenedor').hasChild($('elemento1'));
//true
var esHijo = $('contenedor').hasChild($('elemento3'));
//true |
getProperty(propiedad)
Devuelve la propiedad especificada de un elemento.
1
| <div id="elemento" class="miClase"></div> |
1
2
| var clase = $('elemento').getProperty('class');
//miClase |
removeProperty(propiedad)
Borra la propiedad especificada de un elemento.
1
| <div id="elemento" class="miClase"></div> |
1
| $('elemento').removeProperty('class'); |
1
| <div id="elemento"></div> |
getProperties(propiedad, otraPropiedad, masPropiedades)
Devuelve todas las propiedades especificadas de un elemento.
1
| <div id="elemento" class="miClase"></div> |
1
2
3
4
5
6
7
| 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.
1
| <div id="elemento" class="miClase"></div> |
1
2
3
4
5
| $('elemento').setProperties(
{
'class': 'otraClase',
'id': 'otroId'
}); |
1
| <div id="otroId" class="otraClase"></div> |
setHTML(html)
Permite cambiar el HTML de un elemento.
1
| <div id="elemento"></div> |
1
| $('elemento').setHTML('<strong>Bold</strong>'); |
1
2
3
| <div id="elemento">
<strong>Bold</strong>
</div> |
setText(texto)
Permite cambiar el texto de un elemento.
1
| <div id="elemento"></div> |
1
| $('elemento').setText('Este es mi texto'); |
1
| <div id="elemento">Este es mi texto</div> |
getText()
Devuelve el texto de un elemento.
1
| <div id="elemento">Este es mi texto</div> |
1
2
| var texto = $('elemento').getText();
//Este es mi texto |
getTag()
Devuelve el nombre del tag de nuestro elemento en minúsculas.
1
| <div id="elemento"></div> |
1
2
| var tag = $('elemento').getTag();
//div |
empty()
Borra todo el contenido de un elemento.
1
2
3
4
5
6
| <div id="contenedor">
<div id="elemento1">Elemento1</div>
<div id="elemento2">Elemento2
<div id="elemento3">Elemento3</div>
</div>
</div> |
1
| $('contenedor').empty(); |
1
| <div id="contenedor"></div> |
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.
Popularity: 39% [?]
Otros artículos
October 1, 2007 a las 3:54 am
Exelente ^^
Para los que los que gusten
Los cuatro tutoriales en PDF
http://www.4shared.com/file/25429187/8ac181cf/MT_y_el_DOM.html
October 1, 2007 a las 10:58 pm
Que visitante de lujo
Si les resulta útil un PDF con todo por ahí me animo y armo un mini libro en pdf con indice y todo basado en mis artículos sobre Mootools.
Saludos, gracias por el comment
October 2, 2007 a las 2:22 am
Sería De agradecer, necesito algo mas local para buscar cuando me atasco con Mootools, y con eso de que quitaron el buscador de la pagina =S.
October 3, 2007 a las 2:28 am
¿Sabes de algun UI o GUI para mootools?
October 3, 2007 a las 10:27 am
La verdad que no. Lei hace un tiempo sobre algunas extensiones para Dreamweaver pero no se en que quedo.
Saludos
November 1, 2007 a las 3:32 am
Gracias…Gran labor el tuyo. me es de gran ayuda. Voy a volver seguido, espero poder contribuir en algo pronto.
November 1, 2007 a las 9:22 pm
Gracias a vos por el comentario Marcelo, me alegro que te sirva lo que hago.
Saludos.
November 24, 2007 a las 5:23 pm
Hola que tal?, me parecio muy interesante la forma de resolver el script sobre edicion de un XML, pero me podrias explicar (si es posible con un ejemplo la forma de usar el file_get_contents) justo como lo explicaste en los 5 pasos anteriores.(Para agregar items una manera sencilla seria:
1- Tomar todo el contenido del XML actual con file_gen_contents o similar.
2- Colocar en una variable todos los items que vas a agregar.
3- Reemplazar en la variable obtenida en el primer punto, el texto “” por el contenido de la variable obtenida en el segundo punto.
4- Concatenar al final “”. $variable .= “”;
5- Sobreescribir el archio original por otro completamente nuevo que contenga el contenido logrado en el punto cuatro)
Te lo agradeceria mucho, estoy haciendo un codigo PHP y necesito añadir lineas al XML.
December 23, 2007 a las 1:10 pm
se podría hacer un tutorial simple de como usar mootools para un modelo MVC? porque estoy haciendo un proyecto y he pedido ayuda y todo y no entiendo como hacer un formulario, enviar los datos en ajax y luego actualizar un elemento. Me gustaría si pudieras explicar eso, como hacer formularios en ajax usando mootools y actualizar elementos, dejar el form en blanco, etc.
Muchas gracias, me encantó tu blog, espero ver muchas más cosas además de mootools.
December 23, 2007 a las 5:45 pm
Laut, me agarras en un periodo vacacional bastante vago, aunque sigo pendiente del blog y planeo volver dentro de no mucho con bastante mas animo jeje.
Por el momento solo te puedo decir que el MVC no interfiere para nada en lo que es AJAX, es decir, si sabes usar AJAX en sistemas comunes que no aplican el patron MVC, sabras aplicarlos con MVC.
Y sobre ajax tengo algunas cosas en el blog, probablemente las hayas visto, pero te las recuerdo:
Ajax facil con Mootools
XHR Mootools
Trabajando con AJAX JSON y Mootools
May 7, 2008 a las 4:09 am
[...] Recorrido entre los nodos. [...]