Método prop() de jQuery y diferencias con attr()

Antes de jQuery 1.6 teníamos un único método para el acceso y modificación de todos los atributos de los elementos de la página por medio de jQuery, llamado attr(). A partir de jQuery 1.6 tenemos dos métodos que vamos a tratar de distinguir en este artículo. Por un lado tenemos prop() y por otro lado tenemos attr().

El método attr() sirve para acceder a atributos de la página y ya lo explicamos en un par de artículos del Manual de jQuery. En el texto Acceder y modificar atributos HTML desde jQuery repasamos los usos generales de este método y en el artículo Método attr() de jQuery, otros usos y removeAttr() vimos otros usos y el método "hermano" removeAttr().

Nota:

Ahora en el API de jQuery tenemos un nuevo integrante del ecosistéma de métodos para trabajo con los atributos de la página, llamado prop(), que sirve para acceder y modificar propiedades.
 

Qué son atributos y qué son propiedades

En la documentación de jQuery tienes una explicación sobre todo esto, aunque a veces puede resultar algo confusa, porque habitualmente utilizamos el término ?attribute? y ?property? (atributo y propiedad) para la misma idea, es decir, atributos de las etiquetas HTML. Al menos en los manuales de DesarrolloWeb .com utilizamos esos dos términos indistintamente como sinónimos cuando nos referimos al HTML e incluso muchas veces al hablar de programación.

Pues bien, para clarificar esto, tengamos en cuenta a qué nos estamos refiriendo en este caso como atributo y a qué nos referimos con propiedad:

Atributo: cualquier cosa que tengamos en una etiqueta HTML para personalizarla.

<a style="color: red">...</a>

En ese caso "style" es un atributo de la etiqueta HTML.

Propiedad: cualquier cosa a la que podamos acceder desde una propiedad de un objeto nativo Javascript.

document.forms[0].elements[0].checked

En el ejemplo, tenemos varias propiedades en funcionamiento, pero veamos el "checked" final, que es una propiedad de un elemento de formulario. A esa propiedad accedemos desde el DOM de Javascript.

Por lo tanto, para concretar todavía más y ver lo confuso que puede llegar a ser, esa propiedad nativa Javascript "checked" sería diferente de este atributo "checked":

<input type="checkbox" checked="checked">

En ese caso "checked" es el atributo de HTML.
 

Uso del método prop() en jQuery

El método prop() sirve para modificar propiedades nativas de Javascript de los elementos de una página. Como otros métodos de jQuery el uso es ligeramente distinto dependiendo del juego de parámetros que le enviemos.

En principio, enviando un único parámetro nos sirve para acceder al valor de una propiedad, aquella que indiquemos en el parámetro. La otra opción nos sirve para modificar una propiedad y para ello debemos indicar dos parámetros, el primero sería la propiedad a modificar y el segundo el valor que queremos introducir.

$(elemento).prop("checked");

Esto nos devolvería el valor de la propiedad Javascript "checked", que seguramente sepamos, es un booleano que indica con true o false si un campo checkbox está o no marcado.

Si quisiéramos modificar el estado del checkbox, hacemos lo siguiente:

$(elemento).prop("checked", true);

Esto haría que el checkbox estuviera marcado como confirmado.
 

Cuándo utilizar prop() y cuándo usar attr()

Antes de jQuery 1.6 solo existía attr(), por lo que no existía una duda concreta sobre cuándo usar uno o el otro. El problema es que attr() tenía algunos problemas/bugs y se hacía difícil su mantenimiento. Especialmente daban problemas con attr() muchas de las propiedades de objetos Javascript que eran boleanas, como el mencionado checked u otros como disabled o readonly.

En la actualidad tenemos que usar los métodos con cuidado porque pueden producirse casos confusos. ¿Qué hacemos campoCheck.attr("checked") o mejor campoCheck.prop("checked")?

Para evitar esos casos, attr() solo te dará el valor de atributos HTML y prop() te dará el valor de las propiedades del DOM de Javascript para un elemento dado. En versiones más nuevas de jQuery todas las propiedades boleanas de los objetos del DOM se tienen que acceder por prop() y se han desactivado en attr(). Por ejemplo campoCheck.attr("checked") se ha desactivado para que no te devuelva ningún valor y siempre deberías acceder por campoCheck.prop("checked").

Para ver algunos ejemplos.

• Atributos que se modifican con attr(): class, id, href, label, src, title...
• Propiedades que se modifican con prop(): autofocus, checked, async, multiple, readOnly...

Espero que esto resuelva la duda que muchos de nosotros hemos tenido cuando intentamos acceder a propiedades y valores de atributos.