javascript

Chapter 10: The Document Object Model
necessary when the attribute is accessed as an object property). If the attribute with the given name
doesn ’ t exist, getAttribute() always returns null .
The getAttribute() method can also retrieve the value of custom attributes that aren ’ t part of the
formal HTML language. Consider the following element:
< div id=”myDiv” my_special_attribute=”hello!” > < /div >
In this element, a custom attribute named my_special_attribute is defined to have a value of
“ hello! ” . This value can be retrieved using getAttribute() just like any other attribute, as shown
here:
var value = div.getAttribute(“my_special_attribute”);
Note that the attribute name is case - insensitive, so “ ID ” and “ id ” are considered the same attribute.
All attributes on an element are also accessible as properties of the DOM element object itself. There are,
of course, the five properties defined on HTMLElement that map directly to corresponding attributes, but
all recognized (noncustom) attributes get added to the object as properties. Consider the following
element:
< div id=”myDiv” align=”left” my_special_attribute=”hello” > < /div >
Since id and align are recognized attributes for the < div > element in HTML, they will be represented
by properties on the element object. The my_special_attribute attribute is custom, and so won ’ t
show up as a property on the element in Safari, Opera, Chrome, or Firefox. IE creates properties for
custom attributes as well, as this example demonstrates:
alert(div.id);
//”myDiv”
alert(div.my_special_attribute); //undefined (except in IE)
alert(div.align);
//”left”
Two types of attributes have property names that don ’ t map directly to the same value returned by
getAttribute() . The first attribute is style , which is used to specify stylistic information about the
element using CSS. When accessed via getAttribute() , the style attribute contains CSS text while
accessing it via a property that returns an object. The style property is used to programmatically access
the styling of the element (discussed later in this chapter) and so does not map directly to the style
attribute.
The second category of attribute that behaves differently is event - handler attributes such as onclick .
When used on an element, the onclick attribute contains JavaScript code, and that code string is
returned when using getAttribute() .When the onclick property is accessed, however, it returns a
JavaScript function (or null if the attribute isn ’ t specified). This is because onclick and other event -
handling properties are provided such that functions can be assigned to them.
Due to these differences, developers tend to forego getAttribute() when programming the DOM in
JavaScript and instead use the object properties exclusively. The getAttribute() method is used
primarily to retrieve the value of a custom attribute.
283