1.querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。
2.getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
3.区别
getXXXByXXX 获取的是动态集合,querySelector获取的是静态集合。
简单的说就是,动态就是选出的元素会随文档改变,静态的不会,取出来之后就和文档的改变无关了。
如果只要一次查找就可得到元素时,首选getXXXByXXX ;
如果需要经过多级查找,才能得到元素时,首选querySelector;
getElementById()(getXXXByXX)获取动态集合:通过函数获取元素之后,元素之后的改变还是会动态添加到已经获取的这个元素中。换句话说,通过这个方法获取到元素存储到变量的时候,以后每一次在Javascript函数中使用这个变量的时候都会再去访问一下这个变量对应的html元素。
querySelector()获取静态集合:通过函数获取元素之后,元素之后的改变并不会影响之前获取后存储到的变量。也就是获取到元素之后就和html中的这个元素没有关系了。