Changing Tag Attribute Values (Dynamic HTML: The Definitive Reference, 2nd Edition)

Dynamic HTML: The Definitive Reference, 2rd Ed.

5.5. Changing Tag Attribute Values

The DOMs in IE 4 and later and Netscape 6 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.

The primary decision you as a scripter must make is which element referencing scheme(s) to follow: the IE-only (document.all) version for IE 4 and later, or the W3C (document.getElementById( )) version for IE 5 (and later) and Netscape 6 (and later). Opera 6 is a chameleon, depending on how the user sets up the browser to identify itself to a server. By default, it acts like IE 6, which supports both element referencing models.

As we have seen in several examples in Chapter 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
    }
}

Or, for repeated usage of this kind of test, you can establish global flags, as shown in Example 5-1. Once you have a reference to an element object, the syntax for reading or writing a standardized property is identical for both DOMs.

Another syntactical issue arises, however. 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 the IE and W3C DOMs support these methods (plus an extension for both methods in IE). And yet, the same DOM exposes 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 documents. 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.

The following function toggles between two width settings for a text box. It uses the long-accepted property approach for reading and writing an element's property:

function toggleWidth(elemID) {
    var elem = (document.getElementById) ? document.getElementById(elemID) : 
                ((document.all) ? document.all[elemID] : null);
    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) ? document.getElementById(elemID) : 
                ((document.all) ? document.all[elemID] : null);
    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. For 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.