Algunos de los componentes más básicos que podemos manipular, cuando se trata de elementos DOM, son las propiedades y los atributos asignados a los elementos. Estas propiedades y atributos se asignan inicialmente a los elementos DOM como resultado del análisis de su código HTML, y se pueden cambiar dinámicamente bajo el control de una secuencia de comandos.
Propiedades y Atributos en jQuery
Para asegurarnos de que hemos comprendido en su totalidad la terminología y los conceptos manejados, consideremos el siguiente código HTML para crear un elemento de tipo imagen:
<img id="idImagen" src="imagen.png" alt="Soy una imagen png" class="claseImagen" title="Esto es una imagen"/>
En el marcado de este elemento, el nombre de la etiqueta es “img”, mientras que el marcado de “id”, “alt”, “src”, “class” y “title” representan los atributos relacionados al elemento, cada uno de ellos consta de un nombre y un valor. Este marcado del elemento es leído e interpretado por el navegador para crear el objeto JavaScript que representa este elemento en el DOM. Además de almacenar los atributos, este objeto posee una serie de propiedades, incluyendo algunas que representan los valores de los atributos del marcado y que mantienen una lista con los propios atributos.
El código HTML se traduce por el navegador y es convertido en un elemento DOM que representa a la imagen. Al mismo tiempo un objeto de tipo “nodo” es creado y es asignado como una propiedad del elemento DOM, dicha propiedad contendrá los atributos.
Existe una asociación dinámica entre los atributos y sus propiedades correspondientes, a las que nos vamos referir como las propiedades de atributo. Al realizar algún cambio en un atributo también se hará el mismo cambio en la propiedad de atributo correspondiente, y viceversa; sin embargo, a pesar de esto, los valores no siempre son idénticos en los dos lados, tal es el caso de cuando ingresamos un nombre de imagen como valor del atributo src, mientras que en el atributo tendremos “imagen.png” en la propiedad tendremos la URL completa, algo como “http://localhost/imagen.png”.
El nombre también es algo a considerar, en la mayor parte de los casos, el nombre de una propiedad de atributo JavaScript coincide con la de cualquier atributo al que corresponde, pero hay algunos casos en los que difieren. Por ejemplo, el atributo de la clase en este ejemplo, llamado “class”, está representado por la propiedad de atributo con nombre “className”.
jQuery nos da los medios para manipular fácilmente los atributos de un elemento, al mismo tiempo nos da acceso al elemento por lo que también se puede cambiar sus propiedades. El manipular depende de lo que queremos hacer y cómo queremos hacerlo, vamos a empezar por obtener y establecer propiedades de los elementos.
Manipulación de las propiedades de los elementos en jQuery
jQuery no posee un comando específico para obtener o modificar las propiedades de los elementos, por lo que utilizaremos notación de JavaScript nativo para acceder a las propiedades y sus valores.
El truco está en conseguir las referencias del elemento, la forma más fácil para inspeccionar o modificar los elementos que componen un conjunto es con la función “each()”. Este comando se encarga de recorrer todos los elementos de un conjunto y en cada iteración se produce una llamada a la función que se proporciona en forma de parámetro.
Este comando se puede utilizar para configurar fácilmente el valor de una propiedad en todos los elementos de un conjunto completo. Por ejemplo, si escribimos el siguiente código:
jQuery('img').each(function(n){
this.alt='Esta es la imagen '+n+' del documento, y su id es '+this.id;
});
Con esta declaración nos encargamos de invocar una función al iterar cada elemento de tipo imagen que se encuentra en la página, con dicha función modificamos la propiedad “alt” de cada imagen desplegando su orden en el documento y el id correspondiente.
Hay que tener en cuenta que al tratarse de una propiedad de atributo, esta se encuentra ligada a un atributo del mismo nombre, por los que este también es indirectamente actualizado.
Del mismo modo, podemos recoger todos los valores de una propiedad específica con el comando “each()”, si quisiéramos guardarlos en un arreglo haríamos algo como esto:
var todosLosAlts = new Array();
jQuery('img').each(function(){
todosLosAlts.push(this.alt);
});
Si al final únicamente queremos obtener el valor de la propiedad de un solo elemento, recuerde que el conjunto puede ser tratado como una matriz de JavaScript, por lo que podemos obtener la propiedad a través de un código como el siguiente:
var valorAlt = jQuery('#idImagen')[0].alt;
Tratar con los atributos resulta ser un poco menos sencillo que tratar con propiedades en JavaScript, por lo que jQuery provee asistencia para hacer frente a ellos, en el siguiente artículo analizaremos la manera de trabajar con atributos.