querySelector()，querySelectAll()，getElementBy***的区别

语法：

querySelector()方法的基本语法

querySelector方法在document对象上调用，并接受一个参数，表示要选择的元素的CSS选择器。
如果选择器在文档中匹配到一个元素，则该方法将返回第一个匹配的元素。如果没有匹配项，则该方法将返回null

getElementById()方法的基本语法

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
如果没有指定 ID 的元素返回 null;
如果存在多个指定 ID 的元素则返回第一个;
如果需要查找到那些没有 ID 的元素，你可以考虑通过CSS选择器使用 querySelector();
语法:    document.getElementById(elementID);
参数值： String    必须。元素ID属性值。
返回值:  元素对象    指定ID的元素

区别：

getElement(s)By*** 获取的是动态集合，querySelector 获取的是静态集合

动态就是选出的元素会随文档改变，静态的不会 取出来之后就和文档的改变无关了。

接收的参数不同

querySelectorAll 方法接收的参数是一个 CSS 选择符；
getElementsBy 系列接收的参数只能是单一的 className、tagName 和 name；

 浏览器兼容不同

querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 支持 ；
getElementsBy 系列，以最迟添加规范中的 getElementsByClassName 为例，IE 9+、FF 3 +、Safari 3.1+、Chrome 和 Opera 9+ 都已经支持；