记得我们在jquery里面得到一个元素要比直接使用javascript中的document.getElementById()等方法好用多了。随着现在浏览器的发展，目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。都支持querySelector 和 querySelectorAll 方法是W3C Selectors API规范中定义的。他们的作用是根据 CSS 选择器规范，使用和jquery查询方式一样，便捷定位文档中指定元素。
querySelector 和 querySelectorAll 在规范中定义了如下接口：
module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector; Element implements NodeSelector; };
从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。
也就是所有的节点和document对象都存在此方法调用。用过jquery的同学使用querySelector会觉得异常容易
举例：
- document.querySelector("body");//放回body节点
- document.querySelector("#k");//返回id为k的节点
- document.querySelector("#k span");//返回id为k的节点下的第一个span节点
- document.querySelector("#k").querySelector("span");//返回id为k的节点下的第一个span节点
- document.querySelectorAll("li");//返回所用tagName为li的节点集合（NodeList）
- document.querySelectorAll("div .li");//返回class为li的div
复制代码
上面的例子使用是不是感觉和jquery一样。
虽然此方法是如此的好。我也很想知道他的性能是否也足够好，让我们来测试看看
- console.time(‘querySelector‘);
- for (var i = 0; i < 100000; i++) {
- document.querySelector("#wp_editbtns");
- }
- console.timeEnd(‘querySelector‘);
- //querySelector: 519ms
- console.time(‘getElementById‘);
- for (var i = 0; i < 100000; i++) {
- document.getElementById("wp_editbtns");
- }
- console.timeEnd(‘getElementById‘);
- //getElementById: 491ms
复制代码
你会发现使用getElementById的性能要好些。
然后我们再来试试得到节点集合的数据
- console.time(‘querySelectorAll‘);
- for (var i = 0; i < 10000; i++) {
- document.querySelectorAll(".menu-top");
- }
- console.timeEnd(‘querySelectorAll‘);
- //querySelectorAll: 1781ms
- console.time(‘getElementsByClassName‘);
- for (var i = 0; i < 10000; i++) {
- document.getElementsByClassName("menu-top");
- }
- console.timeEnd(‘getElementsByClassName‘);
- //getElementsByClassName: 54ms
复制代码
得到集合时间对比相差巨大。可是现在主流框架，比如jquery，手机上的框架jqmobi等内部实现查找元都是使用的querySelector，等方法，性能低的方法被使用唯一理由就是它用着方便。
总结 ：
- 得到的元素不是需要很麻烦的多次getElementBy..的话，尽量使用getElementBy..,因为他快些。
- 得到的元素需要很麻烦的多次getElementBy..组合才能得到的话使用querySelector，方便。
- 看实际情况，你决定方便优先还是性能优先，
|
