先上结论：
querySelectorAll()返回的是一个静态节点列表(Static NodeList)
getElementsBy系列的返回的是一个动态节点列表(Live NodeList)。
例子：
html
<ul> <li><a href="">1112</a></li> <li><a href="">2112</a></li> <li><a href="">3112</a></li> <li><a href="">4112</a></li> </ul>
使用querySelector系列分别在页面动态插入li前后获取元素
var ul = document.querySelector("ul"); var lis = document.querySelectorAll("li"); console.log(lis); // NodeList(4) [li, li, li, li] for (var i = 0; i < lis.length; i++) { var newLi = document.createElement("li"); newLi.innerHTML = "333" + i; ul.appendChild(newLi); } console.log(lis); // NodeList(8) [li, li, li, li，li,li,li,li]
动态追加前后获取的lis个数不一样
使用getElementsBy系列获取页面元素
var ul = document.getElementsByTagName(‘ul‘)[0]; var lis = document.getElementsByTagName(‘li‘); console.log(ul); console.log(lis); // HTMLCollection(8) for (var i = 0; i < 4; i++) { var newLi = document.createElement("li"); newLi.innerHTML = "333" + i; console.log(lis.length); ul.appendChild(newLi); } var ul1 = document.getElementsByTagName(‘ul‘)[0]; var lis1 = document.getElementsByTagName(‘li‘); console.log(lis1); // HTMLCollection(8)
动态append元素前后，lis的值一样