Javascript for 循环不会退出并不断更新 getElementsByTagName 变量

Question

我有这个简单的 JavaScript 片段

function foo() {
  bar();
}

function bar() {
  var tags = document.getElementsByTagName('example');
  
  for (var i = 0; i < tags.length; i++) {
    console.log(tags.length);
    tags[i].innerHTML = '<example2>Inserted</example2>';
  }
}

foo();

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.2/lodash.min.js"></script>
<example></example>

我没有得到的是，当我更改要插入的插入的innerHTML时，它不会退出循环，因为它不断“更新”变量标记(我在代码片段中添加了2以避免它，如果你运行它)；

作为旁注，如果我使用 lodash forEach它执行了我期望使用 for 循环执行的操作，只需运行一次循环代码。

function foo() {
  bar();
}

function bar() {
  var tags = document.getElementsByTagName('example');

  _.forEach(tags, function(value) {
    console.log(tags.length);
    value.innerHTML = '<example>Inserted</example>';
  });
}

foo();

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.2/lodash.min.js"></script>
<example></example>

我不明白为什么循环不断使用嵌套标签更新变量。

谢谢

Answer 1

document.getElementsByTagName其同级 DOM 方法返回元素的实时 HTMLCollection，这意味着如果添加与您的查询匹配的新元素，则包含对 HTMLCollection 的引用的变量将被更新。您应该:

a) 使用Array.from “分离”集合:

var tags = Array.from(document.getElementsByTagName('element'));

或者，如果您没有可用的 Array.from，您可以使用 Array.prototype.slice:

var tags = Array.prototype.slice.call(document.getElementsByTagName('a'), 0)

b) 不添加与您正在迭代的查询匹配的元素(这会创建无限循环)

<小时/>

这也是为什么建议如果您在 for 循环中迭代元素集合，请在迭代之前捕获列表的长度并将其用作循环边界:

var tags = document.getElementsByTagName('example');
var length = tags.length;

for (var i = 0; i < length; i++) {
   // won't be infinite
   document.createElement('example');
   ...
}