More
More

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);

1
2
3
4
5
6
7
// 体现静态
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上。

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

参考MDN Web API

打赏
手机扫一扫,支持CHE~