Sometimes object.setAttribute(attrib,value) isn't equivalent to object.attrib=value in javascript?

Question

It appears that sometimes object.setAttribute(attrib,value) isn't equivalent to object.attrib=value in javascript?

I've got the following code, which works fine:

var lastMonthBn = document.createElement('input');
lastMonthBn.value='<';     // This works fine
lastMonthBn.type='button'; // This works fine

But the following code doesn't:

var div = document.createElement('div');
div.class = 'datepickerdropdown'; // No luck here!

So i need to use the following:

div.setAttribute('class','datepickerdropdown');

My question is, why? From reading this, I thought that object.setAttribute(blah,value) was the same as object.blah=value??

Answer 1

It should be noted that browsers like Safari will NOT run JavaScript if keywords like "class" or "int" are present.

So it's a cross-browser support sort of thing. "class" is present in JS2.0 [I believe a package system is available there too]

... I should also note that in IE, setAttribute [for non-class things, since setAttribute should be use-able for other members such as "style"] can be glitchy.

Answer 2

Properties and Attributes aren't really the same, however the DOM exposes standard attributes through properties.

The problem you're facing specifically with the class attribute is that class is a future reserved word.

In some implementations the use of a future reserved word can cause a SyntaxError exception.

For that reason, the HTMLElement DOM interface provides a way to access the class attribute, through the className property:

var div = document.createElement('div');
div.className = 'datepickerdropdown';

Remember, attributes aren't the same as properties, for example:

Immagine a DOM element that looks like this:

<div></div>

If you add a custom attribute to it, e.g.:

myDiv.setAttribute('attr', 'test');

An attribute will be added to the element:

<div attr="test"></div>

Accessing attr as a property on the div element, will simply give you undefined (since is not a property).

myDiv.foo; // undefined

If you bind a property to an element, e.g.:

myDiv.prop = "test";

The getAttribute method will not be able to find it, (since is not an attribute):

myDiv.getAttribute('test'); // null

_{Note: IE wrongly messes up attributes and properties. :(}

As I've said before, the DOM exposes standard attributes as properties, but there are some exceptions that you'll have to know:

• The class attribute, is accessible through the className property (the problem you have).
• The for attribute of LABEL elements, is accessible through the htmlFor property (collides with the for statement).

Attributes are case-insensitive, but the language bindings for JavaScript properties are not, so the convention is to use the names is camelCase to access attributes through properties, for example the ones formed by two words, e.g. cellSpacing, colSpan, rowSpan, tabIndex, maxLength, readOnly frameBorder, useMap.