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

【问题标题】：Javascript for loop doesn't exit and keeps updating getElementsByTagName variableJavascript for 循环不会退出并不断更新 getElementsByTagName 变量
【发布时间】：2022-11-28 03:29:32
【问题描述】：

我有这个简单的 javascript sn-p

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 更改为插入时，它不会退出循环，因为它不断“更新”变量标签（我在 sn-p 中添加了 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>

我不明白为什么循环不断更新带有嵌套标签的变量。

谢谢

【问题讨论】：

标签： javascript

【解决方案1】：

document.getElementsByTagName 及其兄弟 DOM 方法返回一个实时 HTML 元素集合，这意味着如果添加了与您的查询匹配的新元素，则包含对 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');
   ...
}

【讨论】：