querySelector 和 getElementById 的区别获取元素基本都用 querySelector() 和

获取元素基本都用 querySelector() 和 querySelectorAll() ，疑惑为什么不用 getElementById()。

1. querySelector() 和 querySelectorAll() 的用法

querySelector()

定义：   querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素；
注意：   querySelector() 方法仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请用 querySelectorAll() 方法替代；
语法：   document.querySelector(CSS selectors)；
参数值： String  必须。指定一个或多个匹配元素的 CSS 选择器。使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
        对于多个选择器，使用逗号隔开，返回一个匹配的元素。
返回值:  匹配指定 CSS 选择器的第一个元素。 如果没有找到，返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。

getElementById()

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

2. 区别

2.1 getElement(s)Byxxxx 获取的是动态集合，querySelector 获取的是静态集合

getElement(s)Byxxxx 随着元素动态改变而改变，做循环时使用可能会造成无限循环

2.2 接收的参数不同

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

后面两条了解

2.3 浏览器兼容不同

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

querySelector 和 getElementById 的区别