Por que esse script não termina em loop infinito?

Estou tentando entender um código que encontrei na internet. Eu não entendo no loop while, por que não é um loop infinito. Se alterar o calculator.appendChildpara, por exemplo, console.logele funciona para sempre.

 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;

Basicamente, sempre há um primeiro filho em um site não vazio, portanto a condição é sempre verdadeira. Alguém pode explicar por que dessa maneira não funciona para sempre?

javascript html

— B. Ma
fonte

o calculatorelemento está fora do dom e o loop while simplesmente se move sobre todos os filhos de bodyto calculator, portanto, em algum momento, bodyestará vazio e o loop terminará. A chave aqui, eu acho, é que calculatorela própria não é filha bodydurante o loop.

— Chris G

Respostas:

Um elemento só pode ser filho de um outro elemento.

calculator.appendChild(document.body.firstChild);

Assim que você se conecta document.body.firstChildà sua calculadora, ela se desconecta automaticamente do corpo, para que o corpo acabe ficando sem filhos.

— tkausl
fonte

Mas não haveria outra primeira criança? não é o mesmo de antes, mas o que era o próximo da fila se tornará o primeiro filho agora ... não seria?

— Learner

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

Seria, e então o loop é executado novamente e leva esse filho também, até que não tenha mais filhos.

— tkausl

Então, basicamente, o appendChild remove o elemento do corpo e o adiciona à calculadora? Eu pensei que era clone

— B. Ma

Não, rouba o original. Se você clonar o nó, cloneNodeele fará um loop para sempre (ou melhor, até que fique sem memória).

— tkausl

Portanto, o processo acontece em 3 etapas simples:

var calculator = document.createElement("div");esta linha cria um div FORA do bodyno DOM
Então o loop move todos os filhos de bodypara o calculatorque acaba eventualmente, a menos que bodytenha filhos infinitos, o que não é possível.
document.body.appendChild(calculator);move o calculatorunderbody

Então, basicamente, existem duas entidades principais bodye calculator, script move todos os filhos de bodypara calculatore então move calculatorpara body.

Em outras palavras roteiro converte todos os filhos de bodyao grandchildrende bodye filha única de bodytorna-se ocalculator

Sei que escrevi demais, mas eu mesmo entendi depois de um tempo, lendo outros comentários e respostas, então só queria deixar aqui para mim no futuro e para qualquer pessoa que precise de mais explicações para obtê-lo LOL

— Aprendiz
fonte