mini Query

// mini Query
  function $(query) {
    var res = [];
    if (document.querySelectorAll) {
      res = document.querySelectorAll(query);
    } else {
      var firstStyleSheet = document.styleSheets[0] || document.createStyleSheet();
      firstStyleSheet.addRule(query, 'Junhey:Jun');
      for (var i = 0, len = document.all.length; i < len; i++) {
        var item = document.all[i];
        item.currentStyle.Junhey&& res.push(item);
      }
      firstStyleSheet.removeRule(0);
    }
    if(res.item) { /* Fuck IE8 */
      var ret = [];
      for(var i = 0, len = res.length; i < len; i++){
        ret.push(res.item(i));
      }
      res = ret;
    }
    return res;
  };

querySelectorAll:

HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。

两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。

1 2	element = document.querySelector('selectors'); elementList = document.querySelectorAll('selectors');

其中参数selectors 可以包含多个CSS选择器，用逗号隔开。

1 2	element = document.querySelector('selector1,selector2,...'); elementList = document.querySelectorAll('selector1,selector2,...');

使用这两个方法无法查找带伪类状态的元素，比如querySelector(‘:hover’)不会得到预期结果。

参考https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

addRule():

定义和用法:addRule()方法向样式表插入一条规则，该方式是特定于 IE 的方法。

语法：addRule(selector,style,index)
参数描述
selector 必需。规则的 CSS 选择器。
style 必需。应用于匹配该选择器的元素的样式。这个样式字符串是一个分号隔开的属性：值对的列表。并没有使用花括号开始或结束。
index 可选。规则数组中插入或附加规则的位置。如果这个可选参数被省略掉，则新的规则会增加到规则数组的最后。
描述

该方法在样式表的 rules 数组的指定 index 处插入（或附加）一条新的 CSS 样式规则。这是标准 insertRule() 方法的特定于 IE 的替代。
注意：这个方法的参数和 insertRule() 方法的参数不同。

参考http://www.w3school.com.cn/xmldom/met_cssstylesheet_addrule.asp

ie8 addEventListener

function addEventListener(evt, fn){
  window.addEventListener ? this.addEventListener(evt, fn, false) : (window.attachEvent)
      ? this.attachEvent('on' + evt, fn) : this['on' + evt] = fn;
}