querySelectorAll 与 getElementsBy 的区别

querySelectorAll 与 getElementsBy 的区别解析

javascript 中获取元素有两个方法 querySelectorAll 与 getElementsBy ,但这两种方法却存在这细小的区别, 这个区别有时就会对我们所写的程序造成巨大的影响.前方高能:

querySelectorAll 相比下面这些方法有什么区别？
● getElementsByTagName
● getElementsByClassName
● getElementsByName

1. W3C 标准
   querySelectorAll 属于 W3C 中的 Selectors API 规范;而 getElementsBy 系列则属于 W3C 的 DOM 规范。

2. 浏览器兼容
   querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 良好支持 。
   getElementsBy 系列，以最迟添加到规范中的 getElementsByClassName 为例，IE 9+、FF 3 +、Safari 3.1+、Chrome 和 Opera 9+ 都已经支持该方法了。

3. 接收参数
   querySelectorAll 方法接收的参数是一个 CSS 选择符,而且必须严格符合 CSS 选择符规范。而 getElementsBy 系列接收的参数只能是单一的className、tagName 和 name。

4. 返回值
   大部分人都知道，querySelectorAll 返回的是一个 Static Node List，而 getElementsBy 系列的返回的是一个 Live Node List。
   简言之:
   在获取了元素集合后,插入新的元素,前者是不可以检测出来,元素集合不会添加插入的新元素的;而后者相反,后者是实时反馈的.

5.性能
根据不同浏览器的不同版本有两者的执行速度也就是性能上有所不同,
总体方向上: getElementBy 系列的执行速度比 querySelectorAll 的快