When to access the attribute (vs the property)?

Question

I gather from this post that almost always one wants to be accessing the DOM property, not the HTML attribute.

So what are the rare useful exceptions? In what situation is accessing the HTML attribute better than accessing the DOM property?

Answer 1

Sometimes the attribute doesn't map to changes in the property.

One example is the checked attribute/property of a checkbox.

DEMO: http://jsfiddle.net/mxzL2/

<input type="checkbox" checked="checked"> change me

---

document.getElementsByTagName('input')[0].onchange = function() {

    alert('attribute: ' + this.getAttribute('checked') + '\n' +
          'property: ' + this.checked);
};

---

...whereas an ID attribute/property will stay in sync:

DEMO: http://jsfiddle.net/mxzL2/1/

<input type="checkbox" checked="checked" id="the_checkbox"> change me

---

var i = 0;

document.getElementsByTagName('input')[0].onchange = function() {

    this.id += ++i;
    alert('attribute: ' + this.getAttribute('id') + '\n' +
          'property: ' + this.id);
};

And custom properties generally don't map at all. In those cases, you'll need to get the attribute.

---

Perhaps a potentially more useful case would be a text input.

<input type="text" value="original">

...where the attribute doesn't change with changes from the DOM or the user.

---

As noted by @Matt McDonald, there are DOM properties that will give you the initial value that would reflect the original attribute value.

HTMLInputElement.defaultChecked
HTMLInputElement.defaultValue

Answer 2

A rare exception is the case of attributes of a <form> element that could clash with elements in the form. For example, consider the following HTML:

<form id="theForm" method="post" action="save.php">
    <input name="action" value="edit">
</form>

The problem is that any input within a form creates a property corresponding to the input's name in the form element, overriding any existing value for that property. So in this case, the action property of the form element is a reference to the <input> element with name action. If that input did not exist, the action property would instead refer to the action attribute and contain the string "save.php". Therefore for properties of form elements corresponding to attributes, such as action and method, it's safest to use getAttribute().

var form = document.getElementById("theForm");

// Alerts HTMLInputElement in most browsers
alert( form.action );

// Alerts "save.php"
alert( form.getAttribute("action") );

// Alerts "post" because no input with name "method" exists
alert( form.method ); 

This is unfortunate; it would have been better if this mapping did not exist, since the elements property of the form already contains all the form elements keyed by name. I think we have Netscape to thank for this one.

Live demo: http://jsfiddle.net/z6r2x/

Other occasions to use attributes:

• When accessing custom attributes, such as <div mymadeupattr="cheese"></div>
• When serializing the DOM and you want values from the original HTML for input attributes such as value and checked.

Answer 3

I can only come up with 2 more situations where accessing/setting attribute would have benefits over property.

Style attribute:

In a case where you are not allowed to use any framework, you can use style attribute to set multiple styles at once like so:

elem.setAttribute( "style", "width:100px;height:100px;" );

instead of doing this:

elem.style.width = "100px";
elem.style.height = "100px";

or this:

var styles = {width: "100px", height: "100px"}, style;

for( style in styles ) {
elem.style[style] = styles[style];
}

Be aware that setting style attribute overwrites the previous one. And its probably better to write a multiple style setter function anyway.

Href attribute:

A href attribute will usually contain a value like "/products", however the property will contain the resolved url, as in: "http://www.domain.com/products" instead of what you really want: "/products". So if you wanna do something dynamically with links, then reading the href attribute instead of property is better because it has the value you intended it to be.

Update

I suddenly found 2 more uses and I am sure there are more like this.

If you want to see if an element has custom tab index set, the easy way is to see if the element has the attribute. Since the default value for .tabIndex-property depends on element and cannot be easily used to see if the element has custom tabIndex.

Seeing if element has a custom .maxLength property. This cannot be seen from property either:

document.createElement("input").maxLength
//524288

It is impossible to tell if the value 524288 was there intentionally without dealing with the attribute.