What is the difference between properties and attributes in HTML?

Question

After the changes made in jQuery 1.6.1, I have been trying to define the difference between properties and attributes in HTML.Looking at the list on the <a href="http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/">jQuery 1.6.1 release notes</a> (near the bottom), it seems one can classify HTML properties and attributes as follows:- Properties: All which either has a boolean value or that is UA calculated such as selectedIndex. - Attributes: 'Attributes' that can be added to a HTML element which is neither boolean nor containing a UA generated value.Thoughts?

Answer 1

When writing HTML source code, you can define attributes on your HTML elements. Then, once the browser parses your code, a corresponding DOM node will be created. This node is an object, and therefore it has properties.

For instance, this HTML element:

<input type="text" value="Name:">

has 2 attributes (type and value).

Once the browser parses this code, a HTMLInputElement object will be created, and this object will contain dozens of properties like: accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight, etc.

For a given DOM node object, properties are the properties of that object, and attributes are the elements of the attributes property of that object.