先看下面一个小例子的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul,li{list-style:none;}
</style>
</head>
<body>
<div id="wrap">
<ul id="list"></ul>
</div>
<script>
var oList = document.querySelector('#list');
var lis1 = oList.querySelectorAll('li');
var lis2 = oList.children;
console.log(lis1.length);//0
console.log(lis2.length);//0
function createLi(){
for(var i=0; i<10; i++){
var li = document.createElement('li');
li.innerHTML = i;
oList.appendChild(li);
}
}
createLi();
console.log(lis1.length);//0
console.log(lis2.length);//10
</script>
</body>
</html>
从上面的结果我们发现，我们发现同样是一开始就获取了ul的子列表，但是通过.querySelectorAll获取的子列表，在创建列表前和创建列表后，长度都为0，而通过.children方法获取的字列表，在列表创建前，长度为0，而创建之后，长度为10，为什么呢？
使用.children获取的是元素对象是一个实时更新的列表 可以看做一个数组对象 而使用querySelectorAll获取的是NodeList 与其他方式获取的NodeList不同 它不是节点集合 而是元素集合 并且是静态的 不会实时更新 相当于克隆了一个新数组
所以，我们在使用的时候要注意了哦，如果想要实时获取列表的变化，可以使用.children，反之，则使用.querySelectorAll（当然也包括getElementsByClassName和getElementsByTagNama）
childNodes也和children一样是实时获取元素的字列表（但两者还是有区别的，这里不再详细叙说，关于两者的区别网上有很多啦）
---------------------
原文：https://blog.csdn.net/lhjuejiang/article/details/80615054