Section IV.5. Changing Tag Attribute Values

IV.5. Changing Tag Attribute Values

The DOMs in IE 4 and later, Mozilla, Safari, and Opera 5 and later expose a tag's attributes as properties of the corresponding scriptable object. Property names tend to mimic attribute names, unless the attribute name contains a hyphen or any other "illegal" ECMAScript identifier character. Some properties are read-only, but the vast majority are read-write. If a new value impacts the appearance of the element, the change occurs, and surrounding content adjusts its layout to fit the new arrangement.

As suggested in Online Section II, I recommend coding changes to HTML markup for only those browsers that include support for the W3C DOM's document.getElementById( ) method for referencing elements. However, if you find that you must also include support for IE 4, you can support both referencing models with a simple decision tree in functions that receive an element's ID as an argument. The following shows a typical structure:

 function myFunc(elemID) {      var elem = (document.getElementById) ? document.getElementById(elemID) :                 ((document.all) ? document.all[elemID] : null);      if (elem) {         // work on element object here     } } 

You also have the option of creating your own custom API function that returns an object reference regardless of object model, as in the following example:

 function getElem(elemID) {     return (document.getElementById) ? document.getElementById(elemID) :            ((document.all) ? document.all[elemID] : null); } 

Even with element object referencing solved, another syntactical issue arises. Strictly speaking (that is, according to W3C DOM guidelines), attribute values should be read via an element object's getAttribute( ) method and set via setAttribute( ), both of which are detailed in Chapter 2 of Dynamic HTML, Third Edition. Both the IE and W3C DOMs support these methods (plus an extension for both methods in IE). And yet, the same DOMs expose all of these attributes as object properties.

It can be said without much hesitation that the W3C DOM's authors appear to have been more concerned with the internal form and structure of the DOM than with practical aspects of using the syntax in real application development. Otherwise, element references would use syntax more compact than the finger-twisting document.getElementById( ) method. The same can be said for reading and writing attributes the "right" way, which is quite download-byte-intensive, as opposed to modifying the properties directly, which is an acceptable, compact way that is supported by all browsers.

To compare the two approaches, we can view a typical value adjustment in each style. The following function toggles between two size attribute settings for a text box using the long-accepted property approach for reading and writing an element's property:

 function toggleWidth(elemID) {     var elem = document.getElementById(elemID);     if (elem) {         var big = 80, small = 20;         elem.size = (elem.size == small) ? big : small;     } } 

Now compare the same function written with the attribute methods and the revised data types for attribute values:

 function toggleWidth(elemID) {     var elem = document.getElementById(elemID);     if (elem) {         var big = "80", small = "20";         elem.setAttribute("size", ((elem.getAttribute("size") == small) ?                           big : small));     } } 

For a simple function like this, the impact of the extra script characters isn't too severe. But the bytes can add up to lengthy scripts.

More problematic, however, are the frequent problems using setAttribute( ) in Internet Explorer. Attempting to set some attributesespecially those involving new URLs for src attributes intended to load new external contentdoesn't work in IE 6 or earlier. A more serious issue, however, is that Microsoft implements the setAttribute( ) method in a slightly non-standard way. In particular, the method's first parameter (the name of the attribute to be set) has to be in the form not of the actual attribute name, but of the corresponding scriptable property name. Although a lot of attribute and property names are the same, some important attribute names conflict with ECMAScript reserved words. For example, to assign a new value to the class attribute in IE, you must refer to it as className, its scripted equivalent. The W3C DOM, however, requires the actual attribute name. Therefore, to use setAttribute( ) religiously throughout your code, you'll have to be aware of occasional branching needed for IE to make sure you pass the correct name as the first parameter. Therefore, despite many standards-centric programmers' preference for the setAttribute( ) method, I find the property approach to be more reliable and compatible across browser object models. For that reason and the sake of brevity, most examples in this book use direct property access. My advice is to use the approach with which you are most comfortable, and stay with it throughout your scripts, but always testing your choice thoroughly in IE to make sure the method works as you require.