jQuery: prop vs attr... clarification [duplicate]

Question

Note, this is not a duplicate of .prop() vs .attr(); that question refers to the basic functionality of prop vs attr, while this question is specific to their differences as setters.

In trying to narrow down what should be set using .prop(), vs what should be set via .attr() when creating a new element, in tests with jQuery 1.7.2, I find that prop is approx 2.5 times faster, so it seems preferable.

The only list of things to be set using attr that I could find gives these for attr:

accesskey, align, background, bgcolor, class, contenteditable, contextmenu, data-XXXX, draggable, height, hidden, id, item, itemprop, spellcheck, style, subject, tabindex, title, valign, width

1. is this complete (ie, anything not in that list - such as min, max, step, etc - should use prop)?

2. in testing, some of those seem to work fine when set using prop. Testing the above list, I've had no issues setting the following with prop:

   id, class, align, contenteditable, draggable, hidden, spellcheck, tabindex, title

3. Is there some reason, for that list of "stuff to set with attr that still work when set with prop", why it should still be set with attr? If not, then 250% faster performance when creating a basic <div id="foo" class="bar" draggable="true" title="zipzap"> seems good to me... :)

Answer 1

I cannot find any complete list online. Everyone who gives any kind of a list just copies the partial one given in the jQuery 1.6 blog post. Regarding #3, Starx sortof addressed this in his comment to an answer here. http://timmywillison.com/ goes into better detail with a decent discussion. MDN and the W3C specs also mentions that there are various interfaces from attributes where they can be set as if they were properties ( https://developer.mozilla.org/en/DOM/element ), though MDN doesn't actually list which ones those are. MDN does mention that using the property interfaces as setters is more brittle than using getAttribute:

"While these interfaces are generally shared by most HTML and XML elements, there are more specialized interfaces for particular objects listed in the DOM HTML Specification. Note, however, that these HTML interfaces are "only for [HTML 4.01] and [XHTML 1.0] documents and are not guaranteed to work with any future version of XHTML." The HTML 5 draft does state it aims for backwards compatibility with these HTML interfaces but says of them that "some features that were formerly deprecated, poorly supported, rarely used or considered unnecessary have been removed." One can avoid the potential conflict by moving entirely to DOM XML attribute methods such as getAttribute()."

However, it seems safe to assume for now that any HTML5 doctype page rendered in Firefox and Chrome is already in an environment where 'deprecated, poorly supported', etc interfaces have already been removed.

Thus I've tested every attribute, as well as the non-attribute properties mentioned in the jQuery blogs, against every every HTML element type, using boolean, string, and int values.

Using 1.7.2 and 1.8pre, whether you call .prop() or attr(), jQuery will internally always actually use .prop for:

async, autofocus, autoplay, checked, controls, defer, disabled, hidden, loop,
multiple, open, readonly, required, scoped, selected

For HTML elements (not considering window, document, etc here), jQuery will not set any of the following attributes unless you use .attr():

accept-charset, accesskey, bgcolor, buffered, codebase, contextmenu, datetime,
default, dirname, dropzone, form, http-equiv, icon, ismap, itemprop, kind, 
language, list, location, manifest, nodeName, nodeType, novalidate, pubdate, 
radiogroup, seamless, selectedIndex, sizes, srclang, style, tagName

And finally, jQuery will set the following list of attributes with either .prop() or .attr(). In the first list above, jQuery always uses .prop(), regardless of whether you use .attr() or .prop(). For the attributes in this list, jQuery uses whatever you use. If you use .prop(), jQuery uses .prop(), and vica versa. In either case, the result is the same. So ignoring any potential semantic considerations, just with regards to prop() being ~2.5 times faster than .attr(), the jQuery 1.6.1 blog post suggests that .attr() be used, but .prop() can be used instead, with significant increase in performance:

accept, action, align, alt, autocomplete, border, challenge, charset, cite, 
class, code, color, cols, colspan, contenteditable, coords, data, defaultValue, 
dir, draggable, enctype, for, headers, height, hidden, high, href, hreflang, 
id, keytype, label, lang, low, max, maxlength, media, method, min, name, 
optimum, pattern, ping, placeholder, poster, preload, readonly, rel, required, 
reversed, rows, rowspan, sandbox, scope, shape, size, span, spellcheck, src, 
srcdoc, start, step, summary, tabindex, target, title, type, usemap, value, 
width, wrap