Para entender la diferencia principal entre .attr()
y .prop()
hay que explicar la diferencia entre un atributo y una propiedad en HTML porque, como su propio nombre indica, .attr()
va a servir para trabajar con atributos, mientras que .prop()
trabaja con propiedades.
Cuando creas un elemento HTML, puedes darle atributos, por ejemplo este input
tiene los atributos id
, name
, type
y value
:
<input id="radio1" name="miRadio" type="radio" value="1" />
Pero entonces el navegador, cuando procesa el código HTML, crea un nodo en el DOM que se corresponde con ese elemento HTML y, como ese nodo es un objeto, tendrá propiedades. Y ese objeto no sólo va a contener los atributos del elemento HTML, sino que va a tener propiedades suyas como nodeName
, selectedIndex
, defaultValue
...
En versiones anteriores de jQuery, .attr()
devolvía atributos y propiedades indistintamente. Y fue a partir de la versión 1.6 (cuando se añadió .prop()
) que se separó y se hizo esa diferenciación entre .attr()
para atributos y .prop()
para propiedades (no sin cierta polémica, lo que obligó a deshacer algunos de los cambios como explica John Resig, el creador de jQuery, en su blog).
Generalmente, en la mayoría de los casos que se usa .attr()
se podría cambiar por un .prop()
y seguiría funcionando (porque los atributos acaban convertidos en propiedades) pero no al revés (porque hay propiedades que no tienen un atributo correspondiente).
De hecho, para evitar problemas, en algunos casos .attr()
hace una llamada a .prop()
para obtener los valores que no se encuentren como atributos pero puedan existir/mutar como propiedades; haciendo que .attr()
sea un poco más lenta. En ese caso, aunque .attr()
funcione, lo conceptualmente correcto, sería usar .prop()
.
Aquí dejo un ejemplo de cómo .attr()
y .prop()
difieren en valor: dos radio buttons en los que uno está chequeado, si pulsas el botón podrás ver que mientras el atributo es "checked" (según especificación HTML), la propiedad ha transformado ese valor a un booleano con valor true
. Ahora marca el otro radio button y vuelve a pulsar el botón: ¡la propiedad ha cambiado a false
pero el atributo sigue diciendo "checked"!
$("#boton").on("click", function() {
console.log("Atributo checked = " + $("#radio2").attr("checked"));
console.log("Propiedad checked = " + $("#radio2").prop("checked"));
})
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<input id="radio1" name="miRadio" type="radio" value="1" />
<input id="radio2" name="miRadio" type="radio" value="2" checked="checked" />
<button id="boton">Comprobar</button>
Fuentes y bibliografía (en inglés):
- Blog de John Resig con las diferencias y justificación para
.attr()
y .prop()
- Documentación de jQuery para
.attr()
- Documentación de Jquery para
.prop()
- Stack Overflow: prop vs attr
- Stack Overflow: diferencias entre prop y attr y cuándo usarlos