javascript

Chapter 10: The Document Object Model
In IE versions 7 and earlier, the getAttribute() method for the
style attribute and event handling attributes such as onclick always return the same
value as if they were accessed via a property. So, getAttribute( “ style ” ) returns an
object and getAttribute( “ onclick ” ) returns a function. Though fixed in IE 8.0, this
inconsistency is another reason to avoid using getAttribute() for HTML attributes.
Setting Attributes
The sibling method to getAttribute() is setAttribute() , which accepts two arguments: the name
of the attribute to set and the value to set it to. If the attribute already exists, setAttribute() replaces
its value with the one specified; if the attribute doesn ’ t exist, setAttribute() creates it and sets its
value. Here is an example:
div.setAttribute(“id”, “someOtherId”);
div.setAttribute(“class”, “ft”);
div.setAttribute(“title”, “Some other text”);
div.setAttribute(“lang”,”fr”);
div.setAttribute(“dir”, “rtl”);
The setAttribute() method works with both HTML attributes and custom attributes in the same way.
Attribute names get normalized to lowercase when set using this method, so “ ID ” ends up as “ id ” .
Because all attributes are properties, assigning directly to the property can set the attribute values, as
shown here:
div.id = “someOtherId”;
div.align = “left”;
Note that adding a custom property to a DOM element, as the following example shows, does not
automatically make it an attribute of the element:
div.mycolor = “red”;
alert(div.getAttribute(“mycolor”));
//null (except in IE)
This example adds a custom property named mycolor and sets its value to “ red ” . In most browsers,
this property does not automatically become an attribute on the element, so calling getAttribute() to
retrieve an attribute with the same name returns null . In IE, however, custom properties are considered
to be attributes of the element and vice versa.
IE versions 7 and earlier had some abnormal behavior regarding setAttribute() .
Attempting to set the class or style attributes has no effect, similar to setting an
event-handler property using setAttribute() . Even though these issues were
resolved in IE 8.0, it ’ s always best to set these attributes using properties.
284