javascript 中获取元素有两个方法 querySelectorAll 与 getElementsBy ,但这两种方法却存在这细小的区别, 这个区别有时就会对我们所写的程序造成巨大的影响.前方高能:
querySelectorAll 相比下面这些方法有什么区别？
● getElementsByTagName
● getElementsByClassName
● getElementsByName
W3C 标准
querySelectorAll 属于 W3C 中的 Selectors API 规范;而 getElementsBy 系列则属于 W3C 的 DOM 规范。
浏览器兼容
querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 良好支持 。
getElementsBy 系列，以最迟添加到规范中的 getElementsByClassName 为例，IE 9+、FF 3 +、Safari 3.1+、Chrome 和 Opera 9+ 都已经支持该方法了。
接收参数
querySelectorAll 方法接收的参数是一个 CSS 选择符,而且必须严格符合 CSS 选择符规范。而 getElementsBy 系列接收的参数只能是单一的className、tagName 和 name。
返回值
大部分人都知道，querySelectorAll 返回的是一个 Static Node List，而 getElementsBy 系列的返回的是一个 Live Node List。
简言之:
在获取了元素集合后,插入新的元素,前者是不可以检测出来,元素集合不会添加插入的新元素的;而后者相反,后者是实时反馈的.
5.性能
根据不同浏览器的不同版本有两者的执行速度也就是性能上有所不同,
说说下面几个方法：
getElementById,
getElementsByName,
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAll
一、getElementById
语法： obj= document.getElementById( sID )
参数： sID : 必选项。字符串(String)。
返回值： obj: 对象(object)。
根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。如果无符合条件的对象，则返回 null。
这个方法再简单不过，不过在IE上还是可能会遇到麻烦，那就是id与name混淆的问题请参照IE中id与name的BUG
二、 getElementsByName
语法： objNodeList = document.getElementsById( name )
参数： name: 必选项。字符串(String)。
返回值： objNodeList : 元素数组
document.getElementsByName(name)该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。如果一个文档中有两个以上的标签NAME相同，那么getElementsByName()就可以取得这些元素组成一个数组。
getElementsByName方法在IE浏览器下也存在id与name混淆的问题。
三、getElementsByTagName
语法： objNodeList = document.getElementsByTagName(tagname); 或
= document.getElementById(‘ID’).getElementsByTagName(“tagname”);
参数： tagname: 必选项。字符串(String)。
返回值： objNodeList : 元素数组
getElementsByTagName() 方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代，这一点于getElementById和getElementsByName有很大的不同。如下例子：
Javascript代码 收藏代码
这段代码会弹出两个提示框内容分别为 11，22。
四、getElementsByClassName
语法： objNodeList = document.getElementsByClassName(class); 或
= document.getElementById(‘ID’).getElementsByClassName(“class”);
参数： class: 必选项。字符串(String)。
返回值： objNodeList : 元素数组
getElementsByClassName方法在标准浏览器中都已经实现,它的特点与getElementsByTagName。
IE这个怪胎没有这个方法，需要我们自己动手。具体的解决方法推荐大家去看这篇博客document.getElementsByClassName的理想实现
五、querySelector和querySelectorAll
语法： objNodeList = document.querySelectorAll(cssselecter); 或
= document.getElementById(‘ID’).querySelectorAll(“cssselecter”);
参数： cssselecter: 必选项。字符串(css选择器)。
返回值： objNodeList : 元素数组
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。两者不同的是querySelector返回的是一个匹配对象，querySelectorAll返回的一个集合(objNodeList )。
目前支持他们的浏览器包括。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera等。
例子如下
Javascript代码 收藏代码
在使用中querySelector 和querySelectorAll 各浏览器的实现略有差别，也会存在一些潜在的BUG。等碰到了再总结进来。
在用过getElementsByName和querySelector之后感觉getelementsByNameu有可能会获取不到所需要的标签，所以本人觉得还是querySelector好用些