JS魔法堂：那些困扰你的DOM集合类型

            var nodes = document.getElementsByName(‘dummyName‘);
var node = nodes.namedItem(‘id‘);

            //
             IE678 返回具有HTMLCollection特征（有namedItem方法）的[object Object]对象
// IE9、10、11、FF、Chrome均返回HTMLCollection
            document.images;
document.links;
document.anchors;
document.forms;
document.embeds;
document.scripts;
document.applets;
document.plugins;
Node对象.getElementsByTagName;
Node对象.getElementsByTagNameNS;
Node对象.getElementsByClassName;
HTMLTableElement对象.tBodies;
HTMLTableElement对象.children;
HTMLTableElement对象.rows;
HTMLTableRowElement对象.cells;
HTMLMapElement对象.areas;


            //
             IE678 返回具有HTMLCollection特征（有namedItem方法）的[object Object]对象
// IE9、10、11返回HTMLCollection

            //
             FF30.0、Chrome返回NodeList
            document.getElementsByName;


            //
             IE678 返回具有NodeList特征（无namedItem方法）的[object Object]对象
// IE9、10、11、FF、Chrome均返回NodeList
            Node对象.childNodes;


            //
             IE5678 返回具有HTMLCollection特征（有namedItem方法）的[object Object]对象

            //
             IE9、10返回[object HTMLCollection]

            //
             IE11、Chrome返回[object HTMLAllCollection]

            //
             FF30.0返回[object HTML document.all class]
document.all;

            //
             IE8返回 [object Object]， IE9+和chrome、FF就返回[object NodeList]
            var nodes =  document.querySelectorAll(‘*‘);

// IE8返回 空集合[object Object]，IE9+和chrome、FF就抛至少是1个函数入参的异常
nodes = document.querySelectorAll();

// 各浏览器均抛SyntaxError异常
nodes = document.querySelectorAll(‘‘) 或 document.querySelectorAll(非字符串类型入参);

add({HTMLOptionElement} opt[, {HTMLOption | Number} before]); // 将选项元素加入到集合的最后，或指定的元素（位置）的后面
remove({Number} index);// 删除指定位置的选项
selectedIndex; // 当前选中项的索引，从0开始

item({Number | String} 索引)
getNamedItem(); //通过名称返回指定的属性节点
getNamedItemNS(); //通过名称和命名空间返回指定的属性节点
setNamedItem(); //通过名称设置指定的属性节点
setNamedItemNS(); //通过名称和命名空间设置指定的属性节点
removeNamedItem(); //通过名称删除指定的属性节点
removeNamedItemNS(); //通过名称和命名空间删除指定的属性节点

 {Undefined} add({String} class); // 已存在的类不会被重复添加
 {Undefined}  remove({String} class)
 {Undefined}  toggle({String} class)
 {Boolean} contains({String} class); //检查是否有指定的类
 item({Number} 索引); //通过索引获取指定位置的类
 length; //表示类的个数
 // 无法通过[{Number} 索引]的方式来设置类，只能通过该方式来获取类

            function polyfillClassList(el){
  
            var r = /\s+/, cls = el.className, _inner  =  cls ? cls.trim().split(r) : [];
  var listener = function(e){
    if (e.propertyName !== ‘className‘) returnvoid0;

    var cLst = el.classList, oLen = _inner.length, cls=  el.className;
    _inner  =  cls ? cls.trim().split(r) : [];
    var len = (cLst.length = _inner.length);
    for (var i = 0, maxLen = Math.max(oLen, len); i < maxLen; ++i){
       if (i < len){
           cLst[i] = _inner[i])
       } else {
           delete cLst[i];
       }
    }    
  };
  el.attachEvent(‘onpropertychange‘, listener);
  el.classList = {
     length: _inner.length,
     item: function(index){
        return _inner[index] || null;
     },
     add: function(cls){
       // 省略检查cls值是否有效的代码if (this.contains(cls)) returnvoid0;
  
       el.detachEvent(‘onpropertychange‘,  listener);
       el.className += ‘‘ + cls;
       _inner.push(cls);
       this[this.length++] = cls;
       el.attachEvent(‘onpropertychage‘, listener);
     },
     remove: function(cls){
       // 省略检查cls值是否有效的代码if (!this.contains(cls)) returnvoid0;

       el.detachEvent(‘onpropertychange‘,  listener);
       el.className = el.className.replace(new RegExp(‘\\b‘ + cls + ‘\\b‘, ‘i‘), ‘‘).trim();
       _inner.splice(_inner.indexOf(cls), 1);
       --this.length;
       el.attachEvent(‘onpropertychage‘, listener);
     },
     toggle: function(cls){
       // 省略检查cls值是否有效的代码this[this.contains(cls) ? ‘remove‘ : ‘add‘](cls);
     },
     contains: function(cls){
       // 省略检查cls值是否有效的代码return el.className.search(new RegExp(‘\\b‘ + cls + ‘\\b‘, ‘i‘)) >= 0;
     },
     toString: function(){
       return _inner.toString();
     }
  };  

  // 初始化classList[{Number} 索引]获取Attr元素for (var i = 0, len = _inner.length; i < len; ++i ){
    el.classList[i] = _inner[i];
  }
}        

            //
             模拟InvalidCharacterError类
            var InvalidCharacterError =  function(msg){
   this.code = 5;
   this.message = msg;
   this.name = ‘InvalidCharacterError‘;
};
InvalidCharacterError.prototype = DOMException;


// 检查入参并抛异常
// @param {String} methodName add、remove等方法名
// @param {String} cls css类var check = function(methodName, cls){
  var msgTpl = ["Failed to execute ‘", , "‘ on ‘DOMTokenList‘: The token provided (‘", ,"‘) contains HTML space characters, which are not valid in tokens."];
  if (/\s+/.test(cls)){
     thrownew InvalidCharacterError((msgTpl[1] = methodName, msgTpl[3] = cls, msgTpl).join(‘‘));
  }
};