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.

var xx = someNumber.min;

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

document.hasAttributes()

So, I searched on that, and after several more clicks, I found

element.getAttribute(attributename)

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.

<input type="number" id="test_a1" class="mcNumber" min="0" max="100000" value="200" step="1e-9">

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.

Screen shots of the debug windows
Chrome 49 and Windows XP	IE 8 and Windows XP

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!

<input type="number" class="mcnumber" id="mcFFTest_number" size="9" value=100 integer>

function mcCheckAttrs(UINumber){

  var attr = UINumber.attributes;

  UINumber.integer = false;
  if ((attr.integer) && (attr.integer.value != "false")) {
    UINumber.integer = true;
  }
}

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.

<input type="number" class="mcnumber" id="mcFFTest_number" size="9" value=100 integer>

function mcCheckAttrs(UINumber){

  UINumber.integer = false; // this causes IE 8 to fail

  if (UINumber.getAttribute("integer") != null) {
    UINumber.integer = true;
  }
}

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.

function mcCheckAttrs(UINumber){

  if (UINumber.getAttribute("integer") != null) {
    UINumber.integer = true;
  } else {
    UINumber.integer = false; // placing this here allows all browser to work
  }
}

It turns out that some browsers return null and that others return an empty string for attributes that do not exist. Accrording to w3schools

Note: If the attribute does not exist, the return value is null or an empty string ("")

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.

  var mcNum_int = UINumber.getAttribute("integer");
  if ((mcNum_int != null) && ((mcNum_int == "") || (mcNum_int == 'true')) ) {
    UINumber.mcInteger = true;
  } else {
    UINumber.mcInteger = false;
  }

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