My homework... After read @cHao and @cernunnos good explanations, and after some months using it... I thing we need another concept to decide, as programmer, when use or not prop and attr:
HTML source-code and its representation: the browser loads HTML page in the browser's memory space. Well, what stay at memory's browser is the DOM representation, but DOM preserves some original things, as attributes and cssText property, that are "sometimes persisted representations".
PS: attributes that are not defined in the "standard DOM", have not a mapping to DOM properties. When one (not read-only) attribute changes, if there are corresponding (mapped) property, it can be changed automaticlally.DOM state: dynamical pages need changes directly at the DOM, that is what final users see. So, if there are some "click and change" actions at the page, each time the DOM goes to a new page representation, so, each time DOM have a new state.
When one DOM-property changes, all other DOM properties (if need) changes consistently.
With these concepts in mind, we can draw a "rule of thumb (for attr
vs prop
uses)":
- Use
prop
, you have 90% of chances that it works... 99% if you using jQuery for change DOM states (and standard DOM hypothesis). - If you need to change or access to
data-*
attributes, use.data()
method. - Otherwise (non-DOM, non-data, or non-standard things) check if a case of use
.attr()
, and reserve some time to study it (see answers above).