选择器性能比较

http://www.cnblogs.com/aaronjs/p/3337531.html

 

ID选择器是速度最快的，这主要是因为它使用JavaScript的内置函数getElementById()；

其次是类型选择器，因为它使用JavaScript的内置函数getElementsByTag()；

速度最慢的是Class选择器，其需要通过解析 HTML文档树，并且需要在浏览器内核外递归，这种递归遍历是无法被优化的。

getElementById 上下文只能是HTML文档 

浏览器支持情况：IE 6+, Firefox 3+, Safari 3+, Chrome 4+, and Opera 10+；

getElementsByName，上下文只能是HTML文档

浏览器支持情况：IE 6+, Firefox 3+, Safari 3+,Chrome 4+, and Opera 10+；

getElementsByClassName

浏览器支持情况：IE 9+, Firefox 3+, Safari4+, Chrome 4+, and Opera 10+

getElementsByTagName

上下文可以是HTML文档，XML文档及元素节点。

高级API：

浏览器支持情况：IE 8+, Firefox 3.5+, Safari 3+, Chrome 4+, and Opera 10+；

querySelector 将返回匹配到的第一个元素，如果没有匹配的元素则返回 Null
querySelectorAll 返回一个包含匹配到的元素的数组，如果没有匹配的元素则返回的数组为空

浏览器内置的css选择符查询元素方法，比getElementsByTagName和getElementsByClassName效率要高很多

前者接收一个CSS选择器字符串参数并返回一个NodeList类数组对象而不是返回HTML集合，后者只返回符合查询条件的第一个节点。很遗憾IE6、7不支持这两个API。

转载于:https://www.cnblogs.com/xiaotaiyang/p/5492508.html