javascript expando and attributes

expando is something like this 

 

elem.attr, or you can use something like this: elem[attr];

 

while attribute is something like this:

 

elem.getAttribute("attr_name");

 

there are something about expando that you should know. 

 

 

 

1. First, the naming of expandos are generally more consistent across browsers.
2. Second, expandos have some name limitations as to what names they are capable of using.
3. Third, expando properties don't exist on XML nodes.Expando properties are primarily only available on HTML documents
4. Fourth, it should be noted that not all attributes become an expando, custom ones does not become expando, you may do some test before access the custom expando, and fall back to attributes way if necessary 
5. Last, and perhaps most importantly, expandos are much, much, faster than their corresponding DOM attribute operations (especially so in Internet Explorer).

below shows the code access the attriute of some elements, while in prefer to expandos. 

 

 

/**************************************
*@Name: expandoattr.js
*@Summary
*  this shows the example of how you make use of the expando and others..
*
*
***************************************/
(function () {
  // map expando names, the primarily reason for why the expando name mapping is because some are reserved world. and some are key words
  var map = {
    "for": "htmlFor",
    "class": "className",
    readonly: "readOnly",
    maxlength: "maxLength",
    cellspacing: "cellSpacing",
    rowspan: "rowSpan",
    colspan: "colSpan",
    tabindex: "tabIndex"
  };

  this.attr = function (elem, name, value) {
    var expando = map[name] || name, expandoExists = typeof elem[expando] !== "undefined";
    if (typeof value != "undefined") {
      // this attribute tells where or not you can use the expando attributes 
      if (expandoExists) {
        elem[expando] = value;
      } else {
        elem.setAttribute(name, value);
      }
      return expandoExists ? elem[expando] : elem.getAttribute(name);
    }
  };
})();