Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (I Básico)

MooTools: la librería más completa para trabajar fácilmente con javascript.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 74

Visitas el mes pasado: 307

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual mootools : desarrollo web
Desarrollo Web
Manual de MooTools
lawebera.es
The MooToorial
mootoorial.com
Mootools para principiantes
brainbol.com
docs/core/ página oficial mootools
mootools.net

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




MooTools (IV)

Métodos del DOM

imagen mootools

Introducción

Los métodos del Dom son aquellos que permiten manipular los elementos de la página. No sólo cambiar su contenido, sino crearlos, incluirlos en un determinado lugar, cambiar un elemento por otro, hacer copias, eliminarlos, etc.

En la página anterior hemos visto los métodos .get() y .set() que permiten cambiar los atributos de los elementos. Leer o escribir su contenido o el contenido de sus atributos principales son las principales tareas que se pueden hacer con estos métodos. Sin embargo existen más métodos usando mootools que nos permiten manipular los elementos de la página.


Incluir un nuevo elemento

Veremos aquí como incluir un nuevo elemento en la página. Por nuevo elemento entendemos una nueva etiqueta con sus atributos y su contenido. Esto debemos hacerlo en dos partes. la primera parte es crear el elemento. La segunda es incorporarlo a la página.

Todas las acciones que hagamos para manipular el dom exigen que tengamos la página totalmente cargada, por lo que el código lo incluiremos dentro de la estructura "domready".


Crear un nuevo elemento

En mootools todas las etiquetas forman parte de la clase "Element", por lo que crear un nuevo elemento consiste en crear o instanciar un nuevo elemento de la clase "Element":

titulo1 = new Element("h2");

Utilizamos la forma new Element() para instanciar un elemento de la clase Element(). Como argumento pasamos el nombre de la etiqueta que queremos crear. En el ejemplo un título del nivel 2 (h2).

Con esto hemos creado una etiqueta vacía (<h2></h2>). La etiqueta la tenemos guardada en la variable titulo1, para darle contenido utilizaremos el método .set(), en el que le incluimos algunas propiedades:

titulo1.set({"html":"Título Principal", "align":"center"});

También podemos incluir las propiedades del elemento en el momento de crearlo, para ello le pasamos un segundo argumento con las propiedades:

parrafo1 = new Element("p",{"html":"Primer párrafo", "id":"p1"});

Observa cómo para pasar las propiedades en el segundo argumento, lo hacemos dentro de llaves ( { ... } ). Cada propiedad va separada de su valor por el signo de dos puntos. Las parejas propiedad:valor se separan por comas.


insertar el elemento

Una vez creado el elemento, éste todavía no está en la página. Simplemente lo tenemos guardado en una variable. Para incluirlo en la página utilizaremos el método .inject():

titulo1.inject($("capa1"),"top");

Como primer argumento pasamos el elemento padre donde queremos insertar el nuevo elemento. En este caso lo insertamos dentro del id="capa1". El segundo argumento puede tomar los valores "top", "bottom", "before" o "after". Con "top" y "bottom" el elemento seleccionado en el primer argumento será el elemento padre, El elemento a insertar se colocará dentro de éste, al principio ("top") o al final ("bottom") .

Para completar el ejemplo incluimos también el nuevo párrafo que hemos creado en el el elemento padre:

parrafo1.inject($("capa1"),"bottom");

El resultado lo vemos aquí a la derecha. Los dos elementos de texto incluidos en el div los hemos incorporado mediante mootools.

Los valores "before" y "after" del segundo argumento, consideran al elemento pasado en el primer argumento como hermano del elemento a insertar. Por lo tanto el elemento a insertar se colocará delante si usamos "before" o detrás si usamos "after", pero siempre al mismo nivel.

Por ejemplo, queremos poner un segundo párrafo detras del anterior. Primero creamos el elemento:

parrafo2=new Element("p",{"html":"Otro párrafo", "id":"p2"});

Y después incluimos el elemento en la página, pero esta vez como elemento hermano del primer párrafo, el cual tiene un id="p1"

parrafo2.inject($("p1"),"after");

Ahora el ejemplo anterior nos quedará tal y como vemos aquí a la derecha.

Existe también el método .adopt() que introduce un elemento dentro de otro, en este caso la disposición entre el elemento padre y el nuevo elemento va a la inversa:

$("ElementoPadre").adopt(nuevoElemento);

El elemento hijo o nuevo elemento se colocará siempre dentro del elemento padre y al final del mismo, es decir, detrás de los demás elementos que ya existan dentro del elemento padre.


Copiar elementos

Para copiar un elemento utilizamos el método .clone(). Dentro del paréntesis sólo admite como argumento los valores booleanos "true" o "false".

copia=$("elemento").clone(true);

Si pasamos true como argumento se copiará todo, incluyendo los nodos hijos que tenga el elemento, si pasamos false se copiará sólo el nodo principal, sin incluir los nodos hijos.

Una vez copiado, debemos colocar el elemento en la página, esto lo haremos mediante el método .inject() visto anteriormente:

copia.inject($("capa1","bottom");


Reemplazar elementos

Para reemplazar un elemento utilizaremos el método replaces() con la siguiente sintaxis: En primer lugar creamos un nuevo elemento:

nuevoElemento= new Element("p",{"html":"Elemento nuevo"});

Y después reemplazamos el nuevo elemento por otro ya existente en la página

nuevoElemento.replaces($("viejoElemento"))

Es decir aplicamos el método replaces() al nuevo elemento que queremos poner, y como argumento ponemos el viejo elemento que queremos sustituir.


Añadir texto

Para añadir texto a un elemento ya existente usamos el método .appendText(). por ejemplo tenemos el siguiente código html:

<p id="p1">Hola</p>

Ahora en javascript-mootols añadimos:

$("p1").appendText(" mundo");

El resultado será que el elemento anterior quedará así:

<p id="p1">Hola mundo</p>


Borrar elementos

Existen varios métodos para borrar o eliminar elementos de la página. veamos cuales son.

Método .empty() : Este método no elimina el elemento sino que lo vacía de contenido. es decir borra todo lo que hay escrito entre las etiquetas, (no borra la etiqueta ni sus atrubituos)

$("elemento").empty();

Método dispose() : Este método borra el elemento de la página, pero no de la memoria. El elemento desaparece de la página, sin embargo puede volver a introducirse haciendo referencia a él. Por ejemplo: borramos el elemento:

$("elemento").dispose();

Pero más tarde lo podemos volver a introducir:

$("capa1").inject($("elemento","bottom")

Método destroy : Este método elimina totalmente el elemento, de manera que no puede volver a utilizarse:

$("elemento").destroy();





En la siguiente página veremos como acceder a los estilos CSS

Modificar Estilos



Manual de Mootools (I Básico)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com