Question

I have this javascript code:

var elt = document.createElement("div");
elt.class = "class_1";

There is supposed to be a styling associated with .class_1 in my CSS, but it did not really apply for some reason. After spent a few hours figuring out what went wrong, I tried this alternative:

elt.setAttribute("class", "class_1");

and it worked….

It is weird since on the other part of my code, I used elt.id and it worked just fine. At first I thought it was a cross-browser issue, but it turned out that "elt.class" doesnt work in all browser.

Is this a bug in the native javascript DOM? can somebody explain why this is or if I did anything wrong? Thanks. All inputs/answers would be appreciated.

Answer 1

Properties and attributes are different things. Attributes are the strings you see in the document code, accessible for any type of document through the DOM Core method getAttribute:

<a id="foo" href="bar" tabindex="1" onclick="alert()" class="bof" potato="lemon">

a.getAttribute('id')         // string "foo"
a.getAttribute('href')       // string "bar"
a.getAttribute('tabindex')   // string "1"
a.getAttribute('onclick')    // string "alert()"
a.getAttribute('class')      // string "bof"
a.getAttribute('potato')     // string "lemon"

whereas the properties, accessible directly on the object, are specialised and document-type-specific (eg defined in DOM HTML or HTML5) and are generally more readable convenience facilities. Although they often reflect the same thing as the attribute, they can differ in terms of name, value, type or purpose.

a.id                         // string "foo"
a.href                       // string "http://www.example.com/base/bar"
a.tabIndex                   // integer 1
a.onclick                    // function() { alert(); }
a.className                  // string "bof"
a.potato                     // undefined

So whilst id results in the same value, href and all other URL properties get absolutised relative to the document; tabIndex and other numeric properties returns a Number instead of literal string; onclick and other event handler properties return a JS Function object, and properties whose name happens to clash with common reserved words like class (not just only JavaScript reserved words, as DOM is a cross-language standard) get renamed (see also: htmlFor), and non-standard attributes aren’t accessible as properties at all. Other gotchas: value/selected/checked on inputs reflect the current contents of a form field; the attributes of the same name are the defaultValue/defaultSelected/defaultChecked initial values.

[Aside: IE<8 has real trouble telling the difference between attributes and properties, and will return the wrong thing for getAttribute in all cases where they differ. Don’t let this confuse you, and avoid using getAttribute for accessing HTML DOM properties for this reason.]