このスクリプトが無限ループで終了しないのはなぜですか？

インターネットで見つけたコードを理解しようとしています。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です。誰かがこの方法でそれが永遠に実行されない理由を説明できますか？

javascript html

— B. Ma
ソース

calculator要素は、DOMの外側にあり、一方、ループは、単にのすべての子上を移動bodyするcalculatorので、ある時点で、body空になり、ループが終了します。ここで重要なのは、ループcalculator自体の子ではないことbodyです。

— Chris G

回答:

要素は、他の1つの要素の子にのみできます。

calculator.appendChild(document.body.firstChild);

すぐに添付してdocument.body.firstChild、あなたの電卓に、それは自動的に切り離し、本体は、最終的に子供のうちに実行されますので、身体から。

— トカウル
ソース

しかし、別のfirstChildは存在しませんか？以前と同じではありませんが、次の行がfirstChildになります。

— 学習者、

But wouldnt there be another firstChild?  not the same as earlier but what was next in line will become the firstChild now..wouldnt it?

子がなくなるまで、ループが再度実行され、この子も取得します。

— tkausl

基本的に、appendChildは本体から要素を削除し、計算機に追加しますか？私はそれがそれを複製すると思った

— B. Ma

いいえ、オリジナルを盗みます。ノードのクローンを作成するとcloneNode、ループが永久に（つまり、メモリ不足になるまで）ループします。

— tkausl

したがって、プロセスは3つの簡単なステップで行われます。

var calculator = document.createElement("div");この行は、DOMのdiv 外側に作成さbodyれます
次に、ループはのすべての子をbodyに移動します。これは、不可能ではない無限の子calculatorがない限り、最終的に終了しbodyます。
document.body.appendChild(calculator);calculator下に移動body

つまり、基本的に2つの主要なエンティティがbodyありcalculator、スクリプトはのすべての子をbodyto calculatorに移動してから、calculatorししbodyます。

つまり、スクリプトは、すべての子どもたちに変換bodyするgrandchildrenのbodyとの唯一の子をbodyなりcalculator

たくさん書いたことはわかっていますが、私はしばらくしてそれを理解し、他のコメントや回答を読んだので、将来のためにここに残しておきたいと思っています。

— 学習者
ソース