HTMLCollection

HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（generic collection），还提供了用来从该集合中选择元素的方法和属性。

HTML DOM 中的 HTMLCollection 是即时更新的（live）；当其所包含的文档结构发生改变时，它会自动更新。

下面的代码由于即时更新的特点会造成死循环

  1. <body>
  2.   <div>1</div>
  3.   <div>2</div>
  4. </body>
  5. <script>
  6.     const div = document.getElementsByTagName("div");
  7.     for (let i = 0; i < div.length; i++) {
  8.         console.log(i);
  9.         document.body.appendChild(div[i].cloneNode());
  10.     }
  11. </script>

使用document.querySelectorAll不会，因为他返回的是NodeList

  1. const div = document.querySelectorAll("div");
  2. for (let i = 0; i < div.length; i++) {
  3.     console.log(i);
  4.     document.body.appendChild(div[i].cloneNode());
  5. }