NodeList & HTMLCollection 是什么
NodeList 对象是节点的汇合，通常是由属性，如Node.childNodes 和 办法，如document.querySelectorAll 返回的。NodeList大部分状况下是<font color=red>动态汇合</font>。
HTMLCollection 接口示意一个蕴含了元素（元素程序为文档流中的程序）的通用汇合（generic collection），还提供了用来从该汇合中抉择元素的办法和属性。HTML DOM 中的 HTMLCollection 是<font color=red>即时更新的（live）</font>；当其所蕴含的文档构造产生扭转时，它会自动更新。
以上内容摘自MDN，具体的解说大家能够参考MDN NodeList和MDN HTMLCollection。
JS中返回为NodeList对象的办法
<font color=red>文档构造产生扭转时，如document.createElement()办法减少节点，返回后果不会变动</font>
- document.querySelectorAll()办法，当文档中节点更新后从新调用该办法，返回后果才会是最新的后果。
- document.getElementsByName()办法
JS中返回为HTMLCollection对象的办法
<font color=red>文档构造产生扭转时，如document.createElement()办法减少节点，返回后果会动静更新，即每次都是取到最新的后果</font>
- 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>
发表回复