NodeList & HTMLCollection 是什么
NodeList 对象是节点的集合，通常是由属性，如Node.childNodes 和 方法，如document.querySelectorAll 返回的。NodeList大部分情况下是静态集合。
HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（generic collection），还提供了用来从该集合中选择元素的方法和属性。HTML DOM 中的 HTMLCollection 是即时更新的（live）；当其所包含的文档结构发生改变时，它会自动更新。
以上内容摘自MDN，详细的讲解大家可以参考MDN NodeList和MDN HTMLCollection。
JS中返回为NodeList对象的方法
文档结构发生改变时，如document.createElement()方法增加节点，返回结果不会变化
- document.querySelectorAll()方法，当文档中节点更新后重新调用该方法，返回结果才会是最新的结果。
- document.getElementsByName()方法
JS中返回为HTMLCollection对象的方法
文档结构发生改变时，如document.createElement()方法增加节点，返回结果会动态更新，即每次都是取到最新的结果
- document.getElementsByTagName()
- document.getElementsByClassName()
JS中返回DOM对象本身的方法
- 通过id获取的getElementById()方法
- 通过选择器获取的document.querySelector()方法
比较代码
<body>
<ul id="ul">
<li name="li1">1</li>
<li name="li1">2</li>
<li name="li1">3</li>
<li name="li1">4</li>
<li name="li1">5</li>
</ul>
<button onclick="add_li()">增加一个li</button>
</body>
<script>
let ul = document.getElementById("ul"); //返回DOM对象本身
let lis = document.querySelector("ul"); //返回DOM对象本身
let count_li = document.querySelectorAll("li"); //返回NodeList对象
console.log(document.getElementsByName("li1")); //返回NodeList
let liss = document.getElementsByName("li1");
let count_tag_li = document.getElementsByTagName("li"); //返回HTMLCollection对象
// document.getElementsByClassName("li1") //返回HTMLCollection对象
// console.log(count_li);
console.log("NodeList点击按钮前所有li的数量count_li=" + count_li.length);
console.log("HTMLCollection对象点击按钮前所有li的数量count_li=" + count_tag_li.length);
// console.log("点击按钮前lis="+liss.length)
function add_li() {
let new_li = document.createElement("li");
new_li.innerHTML = count_li.length + 1;
ul.appendChild(new_li);
console.log("NodeList点击按钮后count_li=" + count_li.length);
console.log("NodeList点击按钮后count_tag_li=" + count_tag_li.length);
// console.log("点击按钮后lis="+liss.length)
count_li=document.querySelectorAll("li");
console.log("NodeList querySelectorAll重新计算后count_li=" + count_li.length);
}
</script>
