children和querySelectorAll之间的区别

共同点：

1. children 所有的子元素
2. querySelectorAll 也可以来找所有的子元素

不同点：

1. 通过children获取到的元素集合（伪数组）是个动态集合，拿到的是实时的信息
2. 通过querySelectorAll获取到的元素集合（伪数组）是个静态集合，拿到的只是页面初次加载时的信息

解释

• 动态集合是会随着元素的变化而变化，元素增加了，集合就跟着增加了
  元素减少了，也会跟着减少。（拍视频）
• 静态集合是不会随着元素的变化而变化。（拍照片）

例子

//html

<ul id="box">
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
</ul>

//js

var box = document.querySelector("#box");

var childs = box.children;
var child_all = box.querySelectorAll("li");

console.log(childs);//(4)[{li},{li},{li},{li}]
console.log(child_all);//(4)[{li},{li},{li},{li}]

// 添加一个li
var newLi = document.createElement("li");
newLi.innerText = "这是新建的";
box.appendChild(newLi);

console.log(childs);//(5)[{li},{li},{li},{li},{li}]
console.log(child_all);//(4)[{li},{li},{li},{li}]