javascript - for 循环条件评估

Question

我有这个 HTML 代码

<div id="first">
  <div id="second">
  </div>
</div>

我想为每个现有的 div 添加一个子元素。

当我使用这段代码时

function appendC() {
  var divsVar = document.getElementsByTagName("div");

  for (var i = 0; i < divsVar.length; i++) {
    var new_div = document.createElement("div");
    div[i].appendChild(new_div);
  }
}

它进入无限循环的功能。但我不明白为什么。

当函数被调用时，它在我的示例中将一个包含 2 个 div 的数组分配给 var divsVar。再也不会执行，除非我再次调用该函数。但是 divsVar.length 在每个循环中都会改变。这怎么可能？？ divsVar.length 应该保持不变？？

如果我使用这样的临时变量

 function appendC() {
      var divsVar = document.getElementsByTagName("div");
    var _temp = divsVar.length;
      for (var i = 0; i < _temp; i++) {
        var new_div = document.createElement("div");
        div[i].appendChild(new_div);
      }
    }

它就像一个魅力。

Answer 1

.getElementsByTagName() 方法返回一个实时的 HTMLCollection。

您可以将集合转换为数组(例如 [].slice.call(collection))，或者使用另一种方法，例如 .querySelectorAll()返回静态 NodeList。

https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll