Question

我正在做一个JavaScript面试问题，但我不能解决，有人可以帮忙吗？

问题：函数appendChildren应该将一个新的子div添加到每个现有的div中。新的div应该通过调用decorateDiv进行装饰。

例如，在执行appendChildren之后，将执行以下div： //示例案例。

    document.body.innerHTML = `
    <div id="a">
      <div id="b">
      </div>
    </div>`;

应采用以下形式（假设decorateDiv不执行任何操作）：

 <div id="a">
      <div id="b">
        <div></div>
      </div>
      <div></div>
    </div>

下面的代码可以完成任务，但是由于某种原因，它会陷入无限循环。修复错误。

function appendChildren(decorateDivFunction) {
  var allDivs = document.getElementsByTagName("div");

  for (var i = 0; i < allDivs.length; i++) {
    var newDiv = document.createElement("div");
    decorateDivFunction(newDiv);
    allDivs[i].appendChild(newDiv);
  }
}

// Example case. 
document.body.innerHTML = `
<div id="a">
  <div id="b">
  </div>
</div>`;

//appendChildren(function(div) {});
console.log(document.body.innerHTML);

https://stackoverflow.com/questions/ask#

the origin of the test can be found here(question 6)

Answer 1

allDivs列表是一个活动NodeList 。这意味着，每次创建新的<div>并将其添加到页面时，列表都会立即更新以包括该新元素。因此，循环将永远继续。

您可以在新环境中使用Array.from()来制作纯数组副本：

var allDivs = Array.from(document.getElementsByTagName("div"));

或者您可以使用它，它应该可以在任何地方使用

var allDivs = Array.prototype.slice.call(document.getElementsByTagName("div"));

自然数组当然会不会立即更新为包含您创建的每个新<div>。

为什么这是一个无限的JavaScript for循环：无法修复该错误

1 个答案: