一道原生JS的问题

Question

    <div>
        <input/>
        <span></span>
    </div>
    
    
    function nodeToFragme(node){
            var flag = document.createDocumentFragment();
            var child;

            while(child = node.firstChild ){
                flag.appendChild(child);    //请问为什么能够每次插入不同的节点？
            }

            return flag ;
        }

为什么每次appendChild都能够插入不同的节点？不应该每次都是第一个节点么？

Answer 1

appendChild 成功后，会把节点从原来的节点位置移除；
当进入 while 循环的下次执行 (child=node.firstChild) 时, 这里面运算的 firstChild 已经变成了原先移除的下一个节点;
直到 node 中再也没有节点时，(child=node.firstChild) 的返回值会为「false」,这时循环就结束了，appendChild 也完成了。
附注：
https://developer.mozilla.org...

Answer 2

这是因为 appendChild 的参数如果是属于已有的其它 node 会摘取过来

Answer 3

因为你用错运算符了

// child = node.firstChild 你用的是 =，表示每次都给child赋值为 node.childChild
while(child = node.firstChild ){
    flag.appendChild(child);    
}

正确的应该是使用==，再严谨点就用===：

while(child === node.firstChild ){
    flag.appendChild(child);    
}