Seeing that in this code the use of attr
and prop
do the same thing, I would like to know what is the difference between the two? and in which scenarios it is recommended to use one or the other without falling into opinions, but based on recommendations made for demonstrable or documented reasons.
$(function()
{
$('#attrId').click(function(e)
{
console.log($(this).attr('id'));
});
$('#propId').click(function(e)
{
console.log($(this).prop('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="attrId">attr</a>
<hr />
<a href="#" id="propId">prop</a>
To understand the main difference between
.attr()
and.prop()
you have to explain the difference between an attribute and a property in HTML because, as its name suggests,.attr()
it will be used to work with attributes, while.prop()
working with properties.When you create an HTML element, you can give it attributes, for example this one
input
has the attributesid
,name
,type
andvalue
:But then the browser, when rendering the HTML, creates a node in the DOM that corresponds to that HTML element, and since that node is an object, it will have properties. And that object will not only contain the attributes of the HTML element, but it will also have its own properties such as
nodeName
,selectedIndex
,defaultValue
...In previous versions of jQuery, it
.attr()
returned attributes and properties interchangeably. And it was from version 1.6 (when.prop()
) was added that this differentiation between.attr()
for attributes and.prop()
for properties was separated and made (not without some controversy, which forced some of the changes to be undone, as explained by John Resig, the creator of jQuery, on his blog ).Generally, in most cases that is used
.attr()
, it could be changed to a.prop()
and it would still work (because attributes end up being converted into properties) but not the other way around (because there are properties that do not have a corresponding attribute).In fact, to avoid problems, in some cases
.attr()
it makes a call to.prop()
get the values that are not found as attributes but can exist/mutate as properties; making.attr()
it a bit slower. In that case, even if.attr()
it works, the conceptually correct thing to do would be to use.prop()
.Here is an example of how
.attr()
and.prop()
differ in value: two radio buttons in which one is checked, if you press the button you will see that while the attribute is "checked" (according to HTML specification), the property has transformed that value to a boolean with valuetrue
. Now check the other radio button and hit the button again: the property has changed tofalse
but the attribute still says "checked"!Sources and bibliography (in English):
.attr()
and.prop()
.attr()
.prop()
For current versions of jQuery:
attr
refers to the value of the attribute from the HTML code whileprop
it refers to the current value of the property (which was initially set to the value of the attribute)A practical example:
As can be seen, using prop activates and deactivates the checkbox, the property
checked
changes state tofalse
and then totrue
and the attributechecked
maintains its value,checked
which is the one that the DOM has at the beginning.However, when using
attr
the set the attribute innull
removes and checked attribute and therefore also changes the state (propertychecked
) to false (deactivated). While returning its original value tochecked
the element, it recovers its attribute, however, this action does not modify the state of the checkbox, which will keep its property false.In general use always
prop
if you try to manipulate the current state of the element andattr
only to get the initial state of the element (I don't recommend you use it to manipulate the attribute once this element has been attached to the DOM if the element is dynamic or never if it is static)