getElementById和querySelector方法的区别

一、querySelector() 的定义

querySelector() 方法选择指定 CSS 选择器的第一个元素
querySelectorAll() 方法选择指定的所有元素
querySelector 方法返回的结果是 NodeList

二、getElementById的定义

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用
getElementBy 方法返回的结果是 HTMLCollection

区别：

1、query 选择符选出来的元素是静态的，而 getElement 这种方法选出的元素的动态的
即：
getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。

这里的静态指的是选出的元素不会随着文档操作而改变。

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

2、在性能上，Chrome 浏览器下 getElementBy 方法的执行速度基本都高于 querySelector

总结：

如果只要一次查找就可得到元素时，首选getXXXByXXX ；

如果需要经过多级查找，才能得到元素时，首选querySelector