What is a property?

JS DOM objects have properties. These properties are kind of like instance variables for the particular element. As such, a property can be different types (boolean, string, etc.). Properties can be accessed using jQuery’s prop method (as seen below) and also by interacting with the object in vanilla JS.

Let’s take a look:

<a href='page.html' class='link_classes' name='linkName' id='linkID'>Hi</a>

$('#linkID').prop('href'); // returns "http://example.com/page.html"
$('#linkID').prop('name'); // returns "linkName"
$('#linkID').prop('id'); // returns "linkID"
$('#linkID').prop('className'); // returns "link classes"

As you can see, all of the properties we set in the HTML are available through prop. Other properties are available too, such as style, even though we didn’t explicitly set them.

Properties can also be updated through the prop method:

   <a href='page2.html'>Hi</a>

    $('#linkID').prop('href', 'page1.html');
    $('#linkID').prop('href'); // returns "http://example.com/page1.html"

What is an attribute?

Attributes are in the HTML itself, rather than in the DOM. They are very similar to properties, but not quite as good. When a property is available it’s recommended that you work with properties rather than attributes.

An attribute is only ever a string, no other type.

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

$('input').prop('checked'); // returns true
$('input').attr('checked'); // returns "checked"

If an element has a default value, the attribute shows the default value even if the value has changed.

<input type="text" name="username" value="user123">

$('input').prop('value', '456user');
$('input').prop('value'); // returns "456user"
$('input').attr('value'); // returns "user123"

Attributes can be useful when you want to set a custom attribute, that is, when there is no property associated.

<input type="text">

$('input').attr('customAttribute', 'something custom');
$('input').attr('customAttribute'); // returns "something custom"
$('input').prop('customAttribute'); // returns undefined

But, to be fair, you can also use custom properties (although this might be bad practice).

<input type="text">

$('input').prop('customAttribute', 'something custom');
$('input').prop('customAttribute'); // returns "something custom"
$('input').attr('customAttribute'); // returns undefined
  • Attributes are defined by HTML. Properties are defined by DOM.
  • Some HTML attributes have 1:1 mapping onto properties. id is one example of such.
  • Therefore in case of id if we try to retrieve the id by using .prop( ) and attr( ) we will get always current value if there is no current value and if default value is present than we will get default value by using both method.
  • Some do not (e.g. the value attribute specifies the initial value of an input, but the value property specifies the current value ).

References:
Stackoverflow
JQuery - Howto