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>

  1. document.querySelectorAll()办法，当文档中节点更新后从新调用该办法，返回后果才会是最新的后果。
  2. document.getElementsByName()办法

JS中返回为HTMLCollection对象的办法

<font color=red>文档构造产生扭转时，如document.createElement()办法减少节点，返回后果会动静更新，即每次都是取到最新的后果</font>

  1. document.getElementsByTagName()
  2. document.getElementsByClassName()

JS中返回DOM对象自身的办法

  1. 通过id获取的getElementById()办法
  2. 通过选择器获取的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>