¿Por qué este script no termina en bucle infinito?

Estoy tratando de entender un código que encontré en internet. No entiendo en el ciclo while, por qué no es un ciclo infinito. Si cambia el calculator.appendChilden por ejemplo, console.logse ejecuta para siempre.

 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;

Básicamente, siempre hay un primer hijo en un sitio no vacío, por lo que la condición siempre es cierta. ¿Alguien puede explicar por qué de esta manera no funciona para siempre?

javascript html

— B. Ma
fuente

el calculatorelemento está fuera del dom, y el ciclo while simplemente se mueve sobre todos los elementos secundarios de bodyto calculator, por lo que en algún momento bodyestará vacío y el ciclo finalizará. La clave aquí, supongo, es que calculatorno es en sí un hijo bodydurante el ciclo.

— Chris G

Respuestas:

Un elemento sólo puede ser hijo de uno otro elemento.

calculator.appendChild(document.body.firstChild);

Tan pronto como se conecta document.body.firstChilda su calculadora, se separa automáticamente del cuerpo, por lo que el cuerpo finalmente se quedará sin niños.

— tkausl
fuente

¿Pero no habría otro primer niño? no es lo mismo que antes, pero lo que sigue en la fila se convertirá en el primer Niño ahora ... ¿no?

— Estudiante

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

Lo haría, y luego el ciclo se ejecuta nuevamente y toma a este niño también, hasta que no tenga más hijos.

— tkausl

Entonces, ¿básicamente appendChild elimina el elemento del cuerpo y lo agrega a la calculadora? Pensé que lo clonaba

— B. Ma

No, roba el original. Si clona el nodo con cloneNodeél, se repetirá para siempre (o más bien, hasta que se quede sin memoria).

— tkausl

Entonces el proceso ocurre en 3 simples pasos:

var calculator = document.createElement("div");esta línea crea un div EXTERIOR del bodyen el DOM
Luego, el bucle mueve a todos los hijos de bodya lo calculatorque finalmente termina a menos que bodytenga hijos infinitos, lo que no es posible.
document.body.appendChild(calculator);mueve el calculatorbajobody

Básicamente, hay dos entidades principales bodyy calculator, el script mueve a todos los hijos de bodyay calculatorluego se mueve calculatora body.

En otras palabras, el script convierte a todos los hijos de bodya grandchildrende bodyy el único hijo de se bodyconvierte encalculator

Sé que escribí demasiado, pero yo mismo lo entendí después de un tiempo, leyendo otros comentarios y respuestas, así que solo quería dejarlo aquí para mí mismo para el futuro y para cualquier otra persona que necesite más explicaciones para obtenerlo LOL

— Aprendiz
fuente