先看下面一個小例子的結果
<!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