issue is whether to use property or attribute.
have not found this documented, so have run some tests (chromium 12):
property <=> attribute
accept, alt, formMethod, formTarget, id, name, placeholder, type, maxlength, size form: method, name, target, action, enctype
- can set either property or attribute
- will reflect to property or attribute
- exception 1: if form property will first look for element of that name (!)
- exception 2: action property rewrites itself using value, passes set value to attribute
- exception 3: enctype maintains its integrity, but passes set value to attribute
property <= attribute
value, autofocus, checked, disabled, formNoValidate, multiple, required
- setting property has no effect on attribute
- setting attribute also sets property
property => attribute
indeterminate
- setting property also sets attribute
- setting attribute has no effect on property
propetry >< attribute
defaultValue, validity, defaultChecked, readOnly form: novalidate
- setting property or attribute has no effect on the other
to me this seems pretty random behavior.
given a random attribute/value to apply to an element, here are the best rules I have e up with (modified as per Tim Down (thanks!) below):
if class, write with
classList
, read withclassName
propertyif a form, always read using attribute (and be a little careful)
if
typeof element[propName] != "undefined"
, use property, ie,element[attr]=val
otherwise, use attribute, ie,
element.setAttribute(attr,val)
is this even close to being right?
note: interestingly, if you have a form with an element named "novalidate", is it even possible to access the novalidate
property of the form itself?
issue is whether to use property or attribute.
have not found this documented, so have run some tests (chromium 12):
property <=> attribute
accept, alt, formMethod, formTarget, id, name, placeholder, type, maxlength, size form: method, name, target, action, enctype
- can set either property or attribute
- will reflect to property or attribute
- exception 1: if form property will first look for element of that name (!)
- exception 2: action property rewrites itself using value, passes set value to attribute
- exception 3: enctype maintains its integrity, but passes set value to attribute
property <= attribute
value, autofocus, checked, disabled, formNoValidate, multiple, required
- setting property has no effect on attribute
- setting attribute also sets property
property => attribute
indeterminate
- setting property also sets attribute
- setting attribute has no effect on property
propetry >< attribute
defaultValue, validity, defaultChecked, readOnly form: novalidate
- setting property or attribute has no effect on the other
to me this seems pretty random behavior.
given a random attribute/value to apply to an element, here are the best rules I have e up with (modified as per Tim Down (thanks!) below):
if class, write with
classList
, read withclassName
propertyif a form, always read using attribute (and be a little careful)
if
typeof element[propName] != "undefined"
, use property, ie,element[attr]=val
otherwise, use attribute, ie,
element.setAttribute(attr,val)
is this even close to being right?
note: interestingly, if you have a form with an element named "novalidate", is it even possible to access the novalidate
property of the form itself?
1 Answer
Reset to default 11Except for rare special cases listed below, always use the property. Once the browser has parsed the intial HTML, attributes are no help to you unless you're serializing the DOM back to HTML for some reason.
Reasons to always favour properties:
- dealing with properties is simpler (see Boolean properties such as
checked
: just usetrue
andfalse
and never worry whether you should be removing the attribute, or setting it to""
or"checked"
) - not every property maps to an attribute of the same name. For example, the
checked
property of a checkbox or radio button does not correspond to any attribute; thechecked
attribute corresponds to thedefaultChecked
property and does not change when the user interacts with the element (except in old IE; see next point). Likewisevalue
anddefaultValue
. setAttribute()
andgetAttribute()
are broken in older versions of IE.
Special cases:
- Attributes of
<form>
elements. Since each form input is mapped to a property of its parent<form>
element corresponding to itsname
, it's safer to usesetAttribute()
andgetAttribute()
to obtain properties of the form such asaction
,name
andmethod
. - Custom attributes, e.g.
<p myspecialinfo="cabbage">
. These will not generally create equivalent properties on the DOM element object, sosetAttribute()
andgetAttribute()
should be used.
One final consideration is that there is not an exact correspondence between attribute and property names. For example, the property equivalent of the class
attribute is className
, and the property for the for
attribute is htmlFor
.