HTML：
<html>
<body>
<div id="a">
</div>
</body>
</html>
上面是我给出的简单 html，我编写了一个函数来在每个 div 中添加一个子 div。
function appendChildren() {
var allDivs = document.getElementsByTagName("div");
console.log(allDivs) // [div#a, a: div#a]
console.log(allDivs.length) // 1
for (let i = 0; i < allDivs.length; i++) {
let newDiv = document.createElement("div");
allDivs[i].appendChild(newDiv);
}
}
appendChildren();
我期望上面的函数会在每个 div 中添加 div，但在调用appendChildren()后它没有按预期工作，它进入无限循环并保持加载。帮助我了解它是如何以及为什么发生的，这将帮助我和其他学习 javascript 的人。谢谢！！！
这将返回一个“实时集合”：
var allDivs = document.getElementsByTagName("div");
这意味着，随着 DOM 的更新，这个集合也会更新。 巧合的是，这是所有
<div><div>let newDiv = document.createElement("div");
allDivs[i].appendChild(newDiv);
因此循环的每次迭代都会添加循环的下一个元素。 无限。
一种解决方案可能是从原始集合构建一个数组，使其不再“活动”：
var allDivs = Array.from(document.getElementsByTagName("div"));
它可能在非常大的元素集上表现不佳（我还没有测试过），但对于像所示代码这样的小型简单功能来说它很好。