In this short post I will explain the difference between attributes and properties in HTML. The .prop()
function introduced in jQuery 1.6 raised a lot of questions about the difference and I hope this post will help you to understand it.
What is an attribute?
Attributes carry additional information about an HTML element and come in name=”value”
pairs. Example: <div class=”my-class”></div>
. Here we have a div
tag and it has a class
attribute with a value of my-class
.
What is a property?
Property is a representation of an attribute in the HTML DOM tree. So the attribute in the example above would have a property named className
with a value of my-class
.
Our DIV node |- nodeName = "DIV" |- className = "my-class" |- style |- ... |- ...
What is the difference between attribute and property?
Attributes are in your HTML text document/file, whereas properties are in HTML DOM tree. This means that attributes do not change and always carry initial (default) values. However, HTML properties can change, for example when user checks a checkbox, inputs text to textarea or uses JavaScript to change the property value.
Here is a visual representation:
HTML DOM <input value="default" /> value = default ---------------- Current values: Attribute: "default" Property: "default"
Assume user inputs his name "Joe" into the inputbox. Here are what attribute and property values of an element will be.
HTML DOM <input value="default" /> value = Joe ---------------- Current values: Attribute: "default" Property: "Joe"
As you can see, only element’s property is changed, because it is in the DOM and dynamic. But element’s attribute is in HTML text and can not be changed!
I hope this helps to understand the difference between attributes and properties. If you have any questions please leave them on jQueryHowto Facebook page.
Also, stay tuned for the next post about the difference between jQuery.attr()
and jQuery.prop()
and when to use one over another.
I don't think the article does anything to clear up the confusion. Your explanation under "What is a property?" could be improved because it's needlessly terse and, moreover, convoluted.
ReplyDeleteI tried to elaborate more and hope those sections are more clear and easy to understand. Thanks Steven for pointing out.
ReplyDeletedidn't read the post as it was originally, however I understood it as it is now :)
ReplyDeletethanks!
Thanks to differentiate attribute and properties, i am working in HTML but didn't knew about the attribute and properties actually what is,,,
ReplyDeletethanks
a general use case would be helpful, but i guess that's what you mentioned you are planning to do in the next post...
ReplyDeleteIt's not clear for me, Still confused can u elaborate this with some other examples
ReplyDeletevery good tutorial and can hopefully help me in building json in the application that I created for this lecture. thank you
ReplyDeleteIts Definitely good bookmarking for future reference.
ReplyDeleteRegards
Can
Thank you! Article bookmarked, jQuery will be my next plan to learn..
ReplyDelete" But element’s attribute is in HTML text and can not be changed!" -- except that $(selector).attr("c", "foo")
ReplyDeletewill change the html. So an element's attribute is mutable.
Althought, I'm not quiet understand, yet, but your article enriched my knowledge about HTML. Thank you.
ReplyDeleteWhat ever happened to the follow up article? Is this site still getting updated?
ReplyDeleteThanks, that helped me!
ReplyDeleteGiven the idea that attributes are static and properties are live, I find the following surprising:
ReplyDelete<a href='http://www.google.com'>click me</a>
var link = document.getElementsByTagName('a')[0];
link.href = 'http://www.yahoo.com';
alert(link.getAttribute('href')); //http://www.yahoo.com
One would expect getAttribute to return precisely that - the original attribute, not the live property.
very nice described Thanks bro.
ReplyDelete