Obtención de valores de los atributos con jQuery

Es de afirmar que varios de los comandos de jQuery que vamos a utilizar cumplen con una función de lectura y al mismo tiempo se pueden utilizar para operaciones de escritura. Cuando los comandos de jQuery pueden realizar dichas operaciones simultaneas, el número y tipo de parámetros que le vamos a proporcionar a la función determinarán la variante del comando que se utiliza.

Dicho caso se presenta en la función “attr()” que vamos a analizar en este artículo, ya que este comando puede ser utilizado tanto para buscar el valor de un atributo del primer elemento dentro de un conjunto combinado o para establecer los valores de los atributos en todos los elementos coincidentes.

Función “attr()”

A pesar de la naturaleza doblemente operativa del método, hay que dejar en claro que la principal función del comando “attr()” es obtener los valores asignados al atributo especificado para el primer elemento en el conjunto combinado, la sintaxis que utiliza dicha función nos indica que debemos proporcionar un parámetro que deberá ser de tipo cadena y que se encargará de indicar el nombre del atributo que buscamos.

Al mandar llamar la función y proporcionar el nombre, obtendremos como devolución el valor del atributo, el cual puede venir como “undefined” en caso de que el conjunto combinado se encuentre vacío o el atributo no exista en el primer elemento analizado.

Veamos esto en acción, supongamos que tenemos el siguiente elemento de tipo imagen en nuestro código HTML:

<img id="miImagen" src="imagen.png" alt="Soy un imagen" class="algunaClase" title="Esto es una imagen" campoextra="Esto es un campo personalizado"/>

Como podemos observar al final de nuestra declaración agregamos un campo personalizado, un atributo que realmente no existe como tal en la sintaxis convencional de HTML pero que aún así podemos obtener su valor.

Si queremos recuperar el valor de ese atributo para trabajar con él, haremos uso de la función “attr()” como si se tratará de cualquier atributo normal, en base a esto nuestra sentencia quedaría de la siguiente manera:

jQuery("#miImagen").attr("campoextra");

Hay que aclarar que al utilizar nombres de atributos que no son estándares, como el caso de “campoextra” es una práctica muy común y es un truco utilizado por varios desarrolladores, pero puede causar que tu lenguaje de marcado sea considerado inválido y resulte en fallas al momento de realizar pruebas de validación de estándares. Esto puede tener implicaciones en la accesibilidad, así como para su análisis por medio de programas que esperan que el sitio este totalmente validado por los estatutos establecidos para HTML o XHTML.

Los nombres de atributos no hacen diferenciación entre mayúsculas y minúsculas, independientemente de cómo fue declarado el nombre del atributo en la etiqueta, podemos acceder a él con alguna de las variantes. Por ejemplo, si declaramos un atributo “title” en nuestro elemento de imagen, este puede ser referenciado mediante “Title”, “TITLE”, “TiTlE” o cualquier otra combinación equivalente, aunque hay que recordar que las reglas XHTML nos establecen que debemos utilizar marcado con letra minúscula.

¿Por qué lidiar con atributos?

Es probable que al llegar a este punto del artículo usted se este preguntando, ¿Qué necesidad tengo de tratar con atributos?, ya que como pudimos analizar en el artículo anterior el manejo de propiedades es mucho más sencillo de aplicar y comprender.

La respuesta a esta pregunta la encontraremos al estudiar el propio comando “attr()” y la aplicación que tiene esta metodología al manejar jQuery. Esta función es mucho más que una envoltura alrededor de los métodos “getAttribute()” y “setAttribute()” de Javascript, ya que con jQuery además de permitirnos acceder al conjunto de atributos de los elementos, nos ofrece acceso a algunas propiedades de uso común que tradicionalmente han sido un dolor de cabeza para los autores de sitios Web, debido a la dependencia del navegador.

Este conjunto de nombres normalizados utilizados para el acceso común de la información se muestra en la siguiente tabla:

Gracias a esto lo que antes implicaba utilizar “div1.style.styleFloat = ‘left’;” para Internet Explorer y “div1.style.cssFloat = ‘left’;” para el resto de los navegadores, se simplifico y ahora con jQuery únicamente utilizaremos un nombre normalizado.

Además de estos atajos útiles, la variante de conjunto de la función “attr()” tiene algunas características prácticas propias las cuales vamos a analizar en el siguiente artículo. Recordemos que al principio este artículo mencionamos la doble operatividad de esta función, por lo que en la siguiente entrega estudiaremos la manera de hacer uso del establecimiento de atributos.