querySelectorAll 方法相比 getElementsBy 系列方法有什么区别？

Question

var ul1 = document.getElementById('ul1') ;

var lis = document.querySelectorAll('li');

var lis = document.getElementsByTagName('li');

querySelectorAll 方法相比 getElementsBy 系列方法有什么区别？

Answer 1

在现代浏览器中，querySelectorAll 的返回值是一个静态的 NodeList 对象，而 getElementsBy 系列的返回值实际上是一个 HTMLCollection 对象 。getElement* 的实时性体现在返回集合的时候，我们知道getElementsBy*和querySelectorAll返回的都是一个节点集合，类似于数组，两种方法的区别就在于这个集合会不会自动更新。querySelectorAll 的返回值是一个静态数组，之后对document结构的改变不会影响到之前取到的结果

Answer 2

querySelectorAll可以像jQuery那样传入CSS选择器进行元素的选取，例如选取div下面所有的a就可以写成document.querySelectorAll('div a')，而通过getElementsBy则需要2步：document.getElementsByTagName('div')[0].getElementsByTagName('a')