Javascript - Reading Attributes

When an attribute is "known" to an html tag (ie, when the browser "knows" that it could exist), it can be accessed using simple dot notation. However, using this technique, "unknown" attributes usually cause a problem (depending on the browser).

When I create new web components, I frequently add new attributes not currently associated with any existing html tag.

I originally simply hacked together some code using the Chrome debugger to see what was available. That "solution" worked for every browser I tried .. except for IE 8. The problem there was that (according to the debugger - Tools / Developer Tools) IE 8 does not include the attributes in the DOM structure.

While attempting to debug the problem using other techniques, I discovered that the document object does not support

So, I searched on that, and after several more clicks, I found It turns out that this works in all the browsers I've tested - including IE8!

Browser Differences | First try | First IE 8 fix failed | A better fix | This Works

Browser Differences

This is a typical html tag for an mcNumber component. These are screen shots taken from the respective debug windows. As you can see, Chrome 49 makes the attributes available and IE 8 does not.

First try

Based on the information in the Chrome 49 screen shot above, I developed this method and used it until I tried to test my components in IE8 - where it failed!

First IE 8 fix failed

Once I learned about the getAttribute method, I tried to use this. At first, it appeared to work in all browsers .. until I discovered a problem. The problem was that once I assigned a value to a new, unknown, parameter, the getAttribute method would return that value. In other words, it did NOT return just the parameters entered via the html tags, but also returned values set in code!

A better fix

Browser compatibility is a real pain - it seems there is no end to continuous debugging.

Once I realized that IE 8 would return values not present in the raw html, I tried this - a logical approach.

It turns out that some browsers return null and that others return an empty string for attributes that do not exist. Accrording to w3schools Well .. that seems reasonable, except that sometimes the value is an empty string when the value *DOES* exist.

This Works

After lots more testing in various browsers, this is the code I settled with - it uses a different name for the attribute in the html tag and the value I use in the code. It also has the added advantage that it will also accept a value of true. (I am not sure that that has any value.)

I am sure that this code will fail in some browser because it assumes that the presence of an empty string indicates that the attribute is there (a clear violation of the w3schools note) - but I have no idea which one. The "logical" way to approach this would be to use the hasAttribute method - except that IE 8 does not support that method.

Write once - debug forever!

Author: Robert Clemenzi
URL: http:// / Languages / Javascript / Reading_Attributes.html