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.appendChild
en por ejemplo, console.log
se 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
fuente
calculator
elemento está fuera del dom, y el ciclo while simplemente se mueve sobre todos los elementos secundarios debody
tocalculator
, por lo que en algún momentobody
estará vacío y el ciclo finalizará. La clave aquí, supongo, es quecalculator
no es en sí un hijobody
durante el ciclo.Respuestas:
Un elemento sólo puede ser hijo de uno otro elemento.
Tan pronto como se conecta
document.body.firstChild
a su calculadora, se separa automáticamente del cuerpo, por lo que el cuerpo finalmente se quedará sin niños.fuente
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.cloneNode
él, se repetirá para siempre (o más bien, hasta que se quede sin memoria).Entonces el proceso ocurre en 3 simples pasos:
var calculator = document.createElement("div");
esta línea crea undiv
EXTERIOR delbody
en el DOMLuego, el bucle mueve a todos los hijos de
body
a localculator
que finalmente termina a menos quebody
tenga hijos infinitos, lo que no es posible.document.body.appendChild(calculator);
mueve elcalculator
bajobody
Básicamente, hay dos entidades principales
body
ycalculator
, el script mueve a todos los hijos debody
aycalculator
luego se muevecalculator
abody
.En otras palabras, el script convierte a todos los hijos de
body
agrandchildren
debody
y el único hijo de sebody
convierte 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
fuente