选择器性能比较

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