querySelector/querySelectorAll

格式：

[1].querySelector([2]);

[1].querySelectorAll([2]);

[1]Document/Element;

[2]CSS 选择器: id, 类, 类型, 属性, 属性值等;多个时querySelectorAll(“①,②，…”)或querySelectorAll([“①”,”②”，…]);

说明：主要作用为CSS选择器；querySelector返回第一个匹配元素,匹配不到返回null；querySelectorAll返回所有匹配元素集合，匹配不到返回NodeList[]；

这里着重说明querySelectorAll，其返回值为NodeList。
NodeList是静态的，主要有length与item两个属性；常把NodeList转为数组使用：Array.prototype.slice.call(div_list);

 // 体现静态
var a = document.getElementById("body").querySelectorAll("div");
var b = document.getElementsByTagName("div");
var oDiv = document.createElement("div");
document.body.appendChild(oDiv);
alert("querySelectorAll:"+a.length+"getElementsByTagName:"+b.length);
// 结果：querySelectorAll:3 getElementsByTagName:4

在IE8下返回类型为StaticNodeList，StaticNodeList只有length属性，使用时小心。

兼容：主流浏览器基本支持，特别注意的是，IE8只支持CSS2.1和一小部分CSS3

引发：
在handsontable上看到用ruleJS实现了类似Excel的单元格公式计算。download了源码想研究下，结果发现IE8不好使，一查源头就到了querySelectorAll上。

// ruleJS src
var formElements = ['input[type=text]', '[data-formula]'];
[].slice.call($totalElements).forEach(function ($item) {
    registerElementInMatrix($item);
    registerElementEvents($item);
});

参考：MDN Web API