IT工程師數位筆記本

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開始

[{String} 屬性名]
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') return void 0;

    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)) return void 0;
  
       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)) return void 0;

       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)){
     throw new InvalidCharacterError((msgTpl[1] = methodName, msgTpl[3] = cls, msgTpl).join(''));
  }
};

        var $el = $('#div'), el = $el[0]; 

        function log(){
            console.log($el.data('raw'));
            console.log(el.dataset['raw']);
            console.log(el.outerHTML);
        }
        log();
　　　　 // 輸出：
　　　　 // raw
　　　　 // raw
        // <div id="div" data-raw="raw"></div>

        $el.data('raw', '$');
        log();
        $el.data('raw', 'raw');
　　　　 // 輸出：
　　　　 // $
　　　　 // raw
　　　　 // <div id="div" data-raw="raw"></div>


        el.dataset.raw = 'dataset';
        log();
        el.dataset.raw = 'raw';
　　　　 // 輸出：
　　　　 // raw
　　　　 // dataset
　　　　 // <div id="div" data-raw="dataset"></div>


        delete el.dataset.raw;
        log();
        // 輸出：
        // raw
        // undefined
        // <div id="div"></div>

        el.dataset.newRaw = 'newRaw';
        console.log($el.data('newRaw')); // 輸出newRaw