Question

我正在尝试理解我在互联网上找到的代码。我在while循环中不明白，为什么它不是无限循环。如果将其中的calculator.appendChild更改为例如console.log它可以永远运行。

 window.location.hash = 1;
 var calculator = document.createElement("div");
 calculator.id = "height-calculator";
 while (document.body.firstChild) {
    calculator.appendChild(document.body.firstChild);
 }
 document.body.appendChild(calculator);
 document.title = calculator.clientHeight;

基本上，在非空站点中始终有第一个孩子，因此条件始终为true。有人可以解释为什么这种方式无法永远运行吗？

Answer 1

一个元素只能是一个另一个元素的子元素。

calculator.appendChild(document.body.firstChild);

将document.body.firstChild附加到计算器后，它会自动脱离与身体，因此身体最终将耗尽所有孩子。

Answer 2

因此，过程只需3个简单的步骤：

var calculator = document.createElement("div");此行在DOM中创建div的{{1}} 外部
然后，循环将body的所有子级移动到body中，除非calculator拥有无限的子级，否则该循环最终结束。
body将document.body.appendChild(calculator);移动到calculator

因此，基本上有两个主要实体body和body，脚本将calculator的所有子代移至body，然后将calculator移至{ {1}}。

换句话说，脚本将calculator的所有子代转换为body的{{1}}，而body的唯一子代成为grandchildren

我知道我写的太多了，但一段时间后我自己理解了，阅读其他评论和答案，所以我只想把它留给我自己，以备将来和其他需要更多解释才能获得大声笑的人

为什么此脚本不以无限循环结尾？

2 个答案: