El Método "Jquery Dom"

Los métodos del DOM son aquellos que permiten manipular los elementos de la página, añadir o quitar etiquetas, cambiarlas de sitio o duplicarlas, leer atributos, crearlos o cambiarles su valor. Estas son algunas tareas que podemos hacer con los métodos del DOM de jQuery de una manera más simple de como lo haríamos con javascript.

Ya vimos en la página anterior los métodos .html() y .text(), los cuales permiten cambiar el contenido de un elemento. Estos también podemos considerarlos métodos del DOM, pues con ellos también se cambia el contenido de la página. Aparte de estos métodos veremos aquí algunos más:


Métodos .append() y .prepend()
El método .apppend añade texto o código HTML al final del elemento al que se refiere, por ejemplo:

$("div").append("<p>añadido un último párrafo</p>");

Este código añade un parrafo al final de todos los elementos "div" de la página. Observese que el texto o código a añadir se pasa dentro del paréntesis como parámetro.

De forma similar, el método .prepend() añade texto o código html al principio del elemento seleccionado:

$("div").append("<p>añadido un primer párrafo</p>");

Este es un párrafo original

este es otro párrafo original

Al igual que en el caso anterior añadimos el código, pero esta vez delante de todo lo que ya teníamos.

Observese que lo que añadimos queda dentro del elemento seleccionado, y queda incluido dentro de sus etiquetas.

veamos aquí a la derecha un ejemplo en funcionamiento:

El recuadro grande lleva el atributo id="capa1". los dos botones de control llevan tambien los atributos id="alfinal" y id="alprincipio". Estos son los botones:


 ...


Ahora para que funcione debemos añadir el código con jQuery, donde se crean los dos párrafos iniciales, y después al pulsar en cada uno de los botones se crea un nuevo párrafo, bien sea delante o detras de los existentes. El código que hemos empleado aquí es el siguiente:

$(document).ready(function(){
   $("#capa1").html("<p>Este es un párrafo original</p><p>este es otro párrafo original</p>");
   $("#alfinal").click(function(){
      $("#capa1").append("<p style='color: blue'>nuevo párrafo al final</p>");
   });
   $("#alprincipio").click(function(){
      $("#capa1").prepend("<p style='color: red'>nuevo párrafo al principio</p>");
   });
});


Métodos .after() y .before()
Estos métodos también insertan un nuevo código en la página, la diferencia con los anteriores es que el código no forma parte del elemento seleccionado, sino que se inserta delante o después de él, creando así un nuevo elemento.

El método .after(); inserta un nuevo elemento que se coloca detrás del seleccionado.

$("#elemento").after("<p>nuevo elemento detrás del seleccionado</p>");

De igual manera el método .before() inserta un nuevo elemento delante del seleccionado:

$("#elemento").before("<p>nuevo elemento delante del seleccionado</p>");

Primer párrafo original

Ultimo párrafo original

Veámoslo con un ejemplo parecido al anterior: aquí el recuadro de la derecha tiene un atributo id="capa2", mientras que el primer boton de control tiene un id="detras" y el segundo un id="delante". Estos son los botones:


 ...


El código para añadir nuevos elementos es ligeramente distinto al anterior, porque tendremos que seleccionar los párrafos que hay escritos dentro del "div", ya que si seleccionasemos el "div", éstos se escribirán fuera del mismo.

El código que hemos usado aquí es el siguiente:

$(document).ready(function(){
   $("#capa2").append("<p id='pr1' style='color: blue'>Primer párrafo original</p>");
   $("#capa2").append("<p id='pr2' style='color: green'>Ultimo párrafo original</p>");
   $("#detras").click(function(){
      $("#pr2").after("<p>nuevo párrafo al final</p>");
   });
   $("#delante").click(function(){
      $("#pr1").before("<p>nuevo párrafo al principio</p>");
   });
});


Eliminar elementos
Dos son los métodos que utiliza jQuery para eliminar elementos, el método .remove() y el método .empty()

El método .remove() elimina por completo el elemento al que se refiere:

$("#div1").remove();

En este ejemplo el elemento id="div1" desaparece por completo de la página.

El método .empty() elimina el contenido del elemento al que se refiere, sin embargo éste conserva sus etiquetas, convirtiéndose en un elemento vacío.

$("#div2").empty();

En este caso se conserva el id="div2" pero el texto y resto de contenido del div se elimina.

Al eliminar un elemento se eliminan también todos los elementos secundarios (etiquetas anidadas) que dependen de él. Estos dos métodos normalmente no suelen llevar parámetros, sin embargo podemos pasar un parámetro a modo de filtro indicando qué elementos del selector queremos que sean eliminados, por ejemplo:

$("#div1").remove("h2");

Aquí se eliminan únicamente las etiquetas "h2" incluidas dentro del id="div1".


Crear nuevos elementos
Hemos visto que al usar los métodos "append", "prepend", "after" y "before" se creaban nuevos elementos en la página. Sin embargo podemos también crear nuevos elementos y guardarlos en una variable, para usarlos más tarde a conveniencia.

Si al objeto jquery $(); , le pasamos como parámetro un texto en HTML que forme una etiqueta, ésta la podemos guardar como un nuevo elemento.

nuevo=$("<p>Nuevo <b>elemento</b> de la página</p>");

Acabamos de crear un nuevo elemento que hemos guardado en una variable, sin embargo éste no forma parte de la página hasta que no lo incorporemos. Para ello podemos usar cualquiera de los métodos para añadir elementos por ejemplo:

$("#div1").append(nuevo);


Copiar elementos
Otras veces lo que buscamos es copiar un elemento de la página en otro lugar, conservando o no el original. Para ello utilizaremos el método .clone():

copia=$("#div1").clone(true)

Hemos hecho una copia de un elemento existente, el cual hemos guardado en una variable. Al método "clone" podemos pasarle como parámetros las palabras true | false. Si pasamos true indicamos que se copian también los eventos javascript que pudiera tener asociados, si pasamos false los eventos javascript no se copian. Si no ponemos parámetro se entiende que hemos puesto false.

Para incorporarlo en otro lugar de la página utilizaremos cualquiera de los métodos para añadir un elemento, por ejemplo:

$("#elemento3").after(copia);

Esto coloca el elemento copiado despues del elemento con id="elemento3"

Si queremos conservar el elemento inicial dejamos la cosa como está, sin embargo si queremos borrarlo y que quede sólo el elemento copiado, basta con eliminar el primer elemento:

$(#div1").remove();

Si queremos conservar los dos elementos, y sin embargo no queremos que tengan el mismo "id", lo que tenemos que hacer es cambiarle el "id" al segundo. El "id" es un atributo, por lo tanto basta con cambiarle el valor de este atributo. esto lo veremos a continuación.


Atributos
Manipular los atributos con jQuery es tan fácil como utilizar el método .attr(). Dependiendo de si lo que queremos es una lectura o una escritura, utilizaremos uno o dos parámetros.

Lectura : Para leer el valor de un atributo debemos pasar un parámetro en el que indicamos el nombre del mismo. Ej.:

ruta=$("#enlace1").attr("href");

En este ejemplo en la variable ruta obtenemos una cadena de texto que indica la url del enlace.

Si queremos leer el contenido de varios elementos asociados a un selector, (por ejemplo $("a")) debemos usar el método "each" tal como hemos visto en páginas anteriores.

Escritura : Para cambiar el valor de un atributo le pasaremos dos parámetros, el primero indica el nombre del atributo, y el segundo su valor. Si el atributo no existe, este se crea y se añade a la etiqueta, ej.:

$("#enlace1").attr("href","http://es.yahoo.com/");

Este código cambia el valor del atributo href y por tanto la ruta del enlace al que se refiere el selector.

Vemos por tanto que cambiando el valor de los atributos podemos hacer cosas como cambiar la ruta de los enlaces, cambiar una imagen por otra, cambiar un elemento de clase o ponerle un nuevo "id", etc.

Escritura múltiple : Supongamos que en un elemento queremos cambiar varios atributos al mismo tiempo, por ejemplo queremos cambiar una imagen por otra. No solo queremos cambiar el atributo "src", sino también el atributo "alt" y el atributo "width". Podríamos hacer una l�nea parecida a la anterior para cada atributo, de la siguiente manera:

$("#imagen1").attr("src","objetos/foto1.jpg");

$("#imagen1").attr("alt","primera foto");

$("#imagen1").attr("width","250");

sin embargo podemos hacerlo de forma más rápida de la siguiente manera.

$("#imagen1").attr({
"src" : "objetos/foto1.jpg" ,
"alt" : "primera foto" ,
"width" : "250"
});

Aquí dentro del paréntesis ponemos unas llaves, dentro de las cuales escribimos las parejas "nombre" : "valor". Entre el nombre del atributo y su valor escribimos el signo de dos puntos, cada pareja va separada de la siguiente por una coma.

Esta estructura se puede usar no sólo para la escritura de atributos, sino para otro tipo de métodos de escritura, como por ejemplo, y tal como veremos más adelante, el estilo CSS.

Eliminar atributos : Para eliminar un atributo utilizaremos el método .removeAttr(). Dentro del paréntesis pasaremos como argumento el nombre del atributo que queremos eliminar:

$("#enlace1").removeAttr("target");

Este código quita el atributo target del enlace con id="enalce1. el atributo desaparece completamente de la etiqueta, tanto su valor como el nombre.

El método .prop() : podemos utilizar el método .prop() también para tener acceso a los atributos de la misma manera que utilizamos el método .attr(). Es decir, si se le pasa un sólo argumento obtenemos la lectura, y pasándole dos, obtenemos la escritura.

El método .prop() en realidad se utiliza para manipular las propiedades de un elemento, sin embargo, como se considera que los atributos son propiedades del elemento, podemos usarlo de igual manera.

Con el método .prop() podemos manipular ademas otra serie de propiedades que no son atributos, como por ejemplo autofocus, readOnly, async, ....